JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgContainer">
    <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 class="fav" href="#" onclick="toevoegenFavo(); return false" title="Klik om aan Favorieten toe te voegen"></a>
</div>

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

CSS

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