JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgContainer">
    <div>
        <a href="javascript:void(viewer.show(<?php echo $i ?>))" title="Badkamer" class="none">	
       	
        <img src="http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg">     </a>
        <a href="#" onclick="toevoegenFavo(); return false" title="Klik om aan Favorieten toe te voegen"></a>
    </div>
</div>

<div class="imgContainer">
    <div>
        <a href="javascript:void(viewer.show(<?php echo $i ?>))" title="Badkamer" class="none">	
            <img src="http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg"></a>
        <a href="#" onclick="toevoegenFavo(); return false" title="Klik om aan Favorieten toe te voegen"></a>
    </div>
</div>
    
<div class="imgContainer">
    <div>
        <a href="javascript:void(viewer.show(<?php echo $i ?>))" title="Badkamer" class="none">	
        <img src="http://www.letsgomobile.org/images/reviews/0102/samsung-camera-phone-test-pictures.jpg">
            </a>	
        <a href="#" onclick="toevoegenFavo(); return false" title="Klik om aan Favorieten toe te voegen"></a>
    </div>
</div>

CSS

.imgContainer {
    position: relative;
    float:left;
    width:97%;
    margin-top:20px;
	background-color:#c2c0c0;
	padding-bottom:20px;
}
.imgContainer div {
    float:left;
}
.imgContainer img {		
	height:175px;
	min-height:175px;
	max-width:96%;
	max-height:96%;
}
.imgContainer a {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    display: block;
    }
.imgContainer div:hover a,
.imgContainer div:focus a {
    background: url(http://bliksekaters.nl/tests/images/maak-favoriet.png);
    }