scale ile hazırlanmış hover-efekt

Biraz  önce  yayınladığım jQuery animasyonlu menü örneği bir  hover  efekti hazırlamak istiyordum ama  son anda aklıma böyle  bir şey geldi ve jQuery kullanmaktan vazgeçtim bu sefer. Sadece Css3  kullanarak  hazırladığım bir hover  efekti. Css kodlara bakarsanız  fazla  özllik olmadığını farkedebilirsiniz. Ama  ortaya  güzelbir görüntü çıkmış bence. Çerçeve içinde  görünen bir resim ve resmin önünde  scale değeri 5 opacity değeri sıfır olduğu için görünmeyen bir  açıklama çerçevesi var. Mousenizi  resimlerin olduğu çerçevelerin içinde gezdirdiğiniz  anda resim 5 kat büyürken opacity değeri sıfır olan açıklama kutusunun opacity değeri 1 oluyor ve ölçek ayarıda 5ten 1 e  düşüyor. Bu işlem sırasında Css3 transitions (geçişler)  kullandığım için webkit tarayıcılarında ve Css3 transition destekleyen tarayıcılarda  animasyonlu bir görüntü ortaya çıkıyor. Resim büyürken açıklama küçülüp ekranın ortasına yerleşiyor. Css3 transition desteklemeyen tarayıcılarda ise herşey bir  anda olup bitiyor.

Kullanım

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

Css :

.container {
 width: 990px;
 margin: 150px auto;
}
ul.cerceve {
 position: relative;
 width: 250px;
 height:300px;
 padding:5px 5px 5px 5px;
 margin:1%;
 float: left;
 list-style:none;
 overflow: hidden;
 border-color:rgba(200,0,0,.5);
 border-radius: 5px;
 border-style:solid;
 border-width:10px;
}
ul.cerceve .baslik {
 width:250px;
 height:150px;
 margin-top:25%;
 background:#FFFFFF;
 opacity:0;
 -webkit-transform: scale(5);
 -moz-transform: scale(5);
 -o-transform: scale(5);
 -ms-transform: scale(5);
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s; 
}
ul.cerceve:hover .baslik{
 opacity:1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s; 
}
ul.cerceve img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
}
ul.cerceve:hover > img {
 -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: scale(5);
 -moz-transform: scale(5);
 -o-transform: scale(5);
 -ms-transform: scale(5);
}
ul.cerceve > .baslik > h1 {
 text-align:center;
 font-size:20px; 
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}
ul.cerceve > .baslik > h2 {
 text-align:center;
 height:30px;
 background-color:pink;
 font-size:20px;
 padding-top:5px;
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}
ul.cerceve > .baslik > h2 > a {
 text-align:center;
 text-decoration:none;
 color:red;
}
ul.cerceve > .baslik > p {
 text-align:center;
 font-size:15px; 
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1); 
}

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

Html :

<div class="container">
 <ul class="cerceve">
 <img src="img.jpg" />
 <div class="baslik">
 <h1>Resim Başlığı</h1>
 <p>Resim açıklaması </p>
 <h2><a href="https://www.mintik.com/?p=14396">Devamını Oku...</a></h2>
 </div> 
 </ul>
</div>