JSFiddle - React, Tailwind, and code Playground

by brianeoneill

HTML

<script src="http://media-cache-ec3.pinterest.com/192x/52/1d/34/521d345398fb2dc3c084e27e15f3220d.jpg"></script>
<div class="facebook">
    <a class="img-toggle" href="#">
        <img src="http://media-cache-ec3.pinterest.com/192x/52/1d/34/521d345398fb2dc3c084e27e15f3220d.jpg"/>
        <img src="http://media2.picsearch.com/is?P_dI7W8usARKoc89_wANMSF_7LLBjwehCxQqoxXUJQU"/>
    </a>
</div>
<div id="bee">
</div>

CSS

.img-toggle{
    position: relative;
}
.img-toggle img:first-child {
    position: absolute;
}

JavaScript

var imgToggle = $('.img-toggle'),
    imgFade   = imgToggle.find('img:first-child');

imgToggle.on('mouseenter', function(){
    imgFade.fadeOut();
});

imgToggle.on('mouseleave', function(){
    imgFade.fadeIn();
});