JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item" data-type="gif">
    <img src="http://img.ifcdn.com/images/237b9b19a8cc0ea78a3b32b567423a4cd0acf77fb19b8c5a485325e2252a7b7a_1.jpg" />
</div>

CSS

.item {
    background: #EFEFEF;
    display: inline;
    float: left;
    height: 300px;
    margin: 0 10px 80px 0;
    position: relative;
    width: 300px;
    transition: opacity 0.6s ease;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;   
}

.item img {
    margin: auto;
    max-height: 300px;
    max-width: 300px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JavaScript

var $item = $('.item');
var $img = $item.find('img');

var handler = function(event){
    console.log('enter '+event.target.tagName);
    $img.remove(); // remove child
};

var handlerRestore = function(){
    console.log('leave '+event.target.tagName);
    $item.append($img);
};

/// double fired event on chrome, safari, firefox
$('.item').mouseenter(handler);
$('.item').mouseleave(handlerRestore);

// one fired event on chrome, but double fired on firefox and safari
//$('.item')[0].onmouseenter = handler;
//$('.item')[0].onmouseleave = handlerRestore;