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.

Download

Demo

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>