JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://raw.github.com/davidck/Fx.Anything/master/Source/Fx.Anything.js"></script>
<h1>Fx.Anything</h1>
<h2>Canvas Animation Sample: MouseEnter</h2>
<div id="holder">
<img id="photo" src="http://raphaeljs.com/bd.jpg" width="320" height="240" alt="Test" />
</div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
CSS
body {
background: #333;
font-family: Arial;
}
h1, h2 {
color: #fff;
display: block;
padding: 10px 20px 0 20px;
}
h1 {
font-size: 22px;
}
JavaScript
Raphael(function () {
var img = document.getElementById("photo");
img.style.display = "none";
var r = Raphael("holder", 600, 540);
var mainImage = r.image(img.src, 140, 140, 320, 240).attr({
opacity: 0.5
});
});