<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()
     })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js