<div class="sablon">
<ul>
<li>
<div class="nesneOrtalama">
<div>
<span class="maske"><a href="#"><img src="https://s22.postimg.org/bmzn0xbal/cdcd.png" /></a></span>
<a class="nesne-link" href="#"><img src="https://s22.postimg.org/eicq7sfal/arka_plandakiresim.png" alt="" /></a>
</div>
</div>
</li>
<li>
<div class="nesneOrtalama">
<div>
<span class="maske"><a href="#"><img src="https://s22.postimg.org/bmzn0xbal/cdcd.png" /></a></span>
<a class="nesne-link" href="#"><img src="https://s22.postimg.org/eicq7sfal/arka_plandakiresim.png" alt="" /></a>
</div>
</div>
</li>
</ul>
</div>
*,ul {padding: 0;margin: 0;list-style: none;}
.sablon { /* div şablonu */
width: 800px;
height: 122px;
position: relative;
}
.maske { /* maskeleme */
display: block;
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 999;
}
.nesneOrtalama { /* nesne ortalama */
height: 122px;
}
ul li {
position: relative;
float: left;
width: 177px;
margin: 0 20px 0 0;
border: 3px solid #e2e2e2;
}
.nesneOrtalama {display: table; width: 100%} /* <div class="nesneOrtalama"><div>resim</div></div> bu sınıf bu div arasına yerleştirilen nesnelerin üsten soldan ortalama yapıp merkezliyor */
.nesneOrtalama div {display: table-cell; vertical-align: middle; text-align: center; position: relative; margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}
$(function(){
$('.sablon ul li').hover(function(){
$('.maske',this).stop(0,1).fadeToggle()
})
})
This Pen doesn't use any external CSS resources.