JSFiddle - React, Tailwind, and code Playground

HTML

<div id="subafbeelding">				
    <script>viewer.add('/media/img/badkamer/5.jpg');</script>
    <a href="javascript:void(viewer.show(1))"></a>
    <div class="item"><a href="javascript:void(viewer.show(1))"></a>
        <a href="#top" title="Opslaan">
            <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQdyl3Q9Accz2DOvt6uTTEymnN3Q9oLpRF0FGdcsYuASv4X1JZhLQ" alt="Badkamer" /></a>
        <div class="favoriet" onclick="return confirm('Deze badkamer toevogen?')"></div>	
        </div>
</div>

CSS

.item div.favoriet{ 
    display:none; 
    z-index:100; 
    background: url('http://www.freeimageslive.com/galleries/workplace/education/pics/random_numbers.jpg')  no-repeat;
    margin: -175px 0px  0 10px; 
    width: 50px;
    height:50px; 
    z-index: 100;
    opacity: 0.5; }

JavaScript

$(".item img").hover(function(){
    $('.favoriet').css('display','block');
});