Fotolar için Perspective özellikli hover-efekt

Resim galerileriniz  için kullanabileceğiniz  Css3 perspective kullanılarak hazırlanmış bir  hover  efekti. Css3 hover efekti örneğinde mouse ile resimlerin üzerinde gezdiğinizde sol taraftan içinde  resim açıklamaları olan bir çerçeve göreceksiniz. çerçeve  arka planda  saklı değil.  Perspective açısı 90 derece olarak ayarlandığı için görünmüyor.  Mouse resmin üzerne geldiğinde  90 derecelik  çerçeve  açısı  sıfır  oluyor. Mousey geri çektiğinizde tekrar açıklama çerçevesinin açısı 90 derece  olduğu için çerçeve görünme oluyor.  Ayrıca Resim açıklamaları  için Css3  inset eklenmiş. Yazılar  için  normalde inset efekti  yok. Yazıların sol ve üst  çizgi rengi arka plana, sağ ve alt çizgiler de arkaplandan biraz daha açık rengi verildiği zaman yazılarda inset  efekti verilmiş gibi görünür. bu şekilde yazılar  arkaplana gömülü gibi  görünür.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css :

.cerceve{
 width: 950px;
 height: 480px;
 padding: 30px 0;
 margin: 50px auto;
 position: relative;
 -webkit-box-sizing: content-box;
 -moz-box-sizing: content-box;
 box-sizing: content-box;
}
.galeri {
 width:300px; 
 height: 250px;
 float:left;
 border-style:solid;
 burder-width: 5px;
 padding-left:10px;
 overflow:hidden;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -moz-box-shadow: 0px 0px 3px #000000;
 -webkit-box-shadow: 0px 0px 3px #000000;
 box-shadow: 0px 0px 3px #000000; 
}
.galeri img {
 width:310px;
 height:250px;
 margin-left:-10px;
}
.galeri li.left {
 width:340px; 
 height: 260px;
 float:left;
 list-style:none;
 background:#222;
 display:block;
 margin-top:-260px;
 margin-left:-20px;
 -webkit-transform-origin: 1% 50%;
 -o-transform-origin: 1% 50%;
 transform-origin: 1% 50%;
 -webkit-transform: perspective(500px) rotateY(90deg);
 -o-transform: perspective(500px) rotateY(90deg);
 transform: perspective(500px) rotateY(90deg);
 -webkit-transition:0.2s linear 0.2s;
 -o-transition:0.2s linear 0s;
 transition:0.2s linear 0s; 
}
.galeri:hover li.left {
 -webkit-transform: perspective(500px) rotateY(0deg);
 -o-transform: perspective(500px) rotateY(0deg);
 transform: perspective(500px) rotateY(0deg); 
 -webkit-transition:0.2s linear 0s;
 -o-transition:0.2s linear 0s;
 transition:0.2s linear 0s; 
}
.galeri li.left a {
 text-align:center;
 text-decoration:none;
 font-size:30px; 
 color: rgba(0,0,0,0.6);
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}
.galeri li.left p {
 text-align:center;
 text-decoration:none;
 font-size:25px;
 color: rgba(0,0,0,0.6);
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}

• Body etketleri arasına eklemeniz gereken bölüm.

Html :

<div class="cerceve">
<div class="galeri"> <img src="hulk.png" />
<li class="left"><a href="https://www.mintik.com/?p=14381&preview=true"><h1>Hulk</h1>
<p>17 Ağustosta Sinemalarda</p></a></li>
</div>
<div class="galeri"> <img src="iron-man.png" />
<li class="left"><a href="https://www.mintik.com/?p=14381&preview=true"><h1>Iron Man 3</h1>
<p>22 Temmuzda Sinemalarda</p></li>
</div>
<div class="galeri"> <img src="man-of-steel-flag.png" />
<li class="left"><a href="https://www.mintik.com/?p=14381&preview=true"><h1>Man of Steel</h1>
<p>Yakında Sinemalarda</p></li>
</div>
</div>