I'm attempting to achieve an effect where an image appears above a background image when hovering over it, similar to this example... https://jsfiddle.net/12zqhqod/7/
<img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB.jpg" />
<div class="pic">
<svg class="blur" width="100%" height="100%">
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="40" fill="white" />
</mask>
<image mask="url(#mask1)" id="bird" alt="follow me" xlink:href="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%"></image>
</svg>
</div>
Here is the corresponding javascript...
var mask1 = $('#mask1 circle')[0];
$('.pic').mousemove(function(event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
console.log(upX, upY);
mask1.setAttribute("cy", (upY - 5) + 'px');
mask1.setAttribute("cx", (upX) + 'px');
});
However, I've been unable to replicate this functionality in react.js and it ends up like this... https://jsfiddle.net/69z2wepo/32320/
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
And here is the react.js code...
var Hello = React.createClass({
render: function() {
return <div>
<img id="heretic" height="300px" width="300px" src="http://i.imgur.com/0bKGVYB.jpg" />
<div className="pic">
<svg className="layers" width="100%" height="100%">
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="40" fill="white" />
</mask>
<image className="imageTest" mask="url(#mask1)" alt="follow me" xlinkHref="http://i.imgur.com/IGKVr8r.png" width="100%" height="100%"></image>
</svg>
</div>
</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
var mask1 = $('#mask1 circle')[0];
$('.pic').mousemove(function(event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
console.log(upX, upY);
mask1.setAttribute("cy", (upY - 5) + 'px');
mask1.setAttribute("cx", (upX) + 'px');
});
I've attempted setting the mask attribute manually using setAttribute in componentDidMount, but then the <image> disappears and fails to display upon hover. It seems that the mask circle remains at (0,0), even though the cx and cy attributes are updating correctly in the browser's dev tools.
Any assistance would be greatly appreciated.