JSFiddle - React, Tailwind, and code Playground

by Michael Russell

HTML

<ul class="overview" >            
    <li><img src="http://fiwishop.com/feedback/images/red-stripe.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-bw.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-red.jpg" ></li>                
    <li><img src="http://fiwishop.com/feedback/images/red-stripe.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-bw.jpg" ></li>
    <li><img src="http://fiwishop.com/feedback/images/red-stripe-red.jpg" ></li>                
</ul>

<div style="clear:both"></div>
<div id="tool">
    <div><img src="http://fiwishop.com/feedback/images/delete-icon.png"/></div>
    <div><img src="http://fiwishop.com/feedback/images/delete-icon.png"/></div>
    <div id="deleteImg"><img src="http://fiwishop.com/feedback/images/delete-icon.png"/></div>
</div>

CSS

.overview{
    width:1500px;
}
.overview li{
    width:200px;
    height:135px;
    background-color:#666;
    float:left;
    margin:10px;
}
.overview li img{
    width:200px;
    position:absolute;
}
#tool{
    width:150px;
    background-color:#eee;
    display:none;
    position:relative;
    left:110px;
    top:0
}
#tool div{
    width:20px;
    display:block;
    float:left;
    margin:5px;
    cursor:pointer;
}
#tool img{
    width:20px;   
}

JavaScript

(function() {
    var currentImg;
    $('.overview li').mouseenter(function() {
        $(this).append($('#tool'));
        $('#tool').css('display', 'block');
        currentImg = $(this).children('img')[0];
    }).mouseleave(function() {
        $('#tool').css('display', 'none');
    });

    $('#deleteImg').click(function() {
        alert(currentImg.src);
    });
})();