Css3 transitions, transforms ve opacity kullanarak hazırladığım bir hover efekti. Artık tamamdır  deyip yayınlamaya karar verdiğim ilk örnekte mouse ile resimlerin üzerinde gezdiğinizde resimlerin etrafındaki beyaz border hızlı bir şekilde turuncu rengine dönüp resmin olduğu çerçevede biraz hızlı büyüyordu. Bu şekilde baktığımda bana merceği anımsatıyordu. Aslında fena da değildi. Css kodlarda .resim kısmını bularak bu bölümdeki transition hızlarını düşürüp yükseltebilirsiniz.

Css3 hover  efekti kullanarak hazırladığım demoda mouse ile resimlerin üstüne geldiğinizde  görünmeyen resim başlıkları yavaşça netleşerek resim çerçevesinin ortasında  durup net bir görüntüye kavuşuyor. Mouseyi çektiğinizde ise tekrar yavaşça saydamlaşıp aşağıya doğru inerken kayboluyor. Aslında  resimlerin başlıkları da çerçeve dışında  değil. Resim çerçevesinin tabanından 30px daha yukarda.  Opacity değeri  sıfır  olarak ayarladığım için ekranda görünmüyorlar.

Css3 hover efekti ile alakalı bir diğer konu mouse ile reismlerin üzerine geldiğinizde resimde  biraz kararma oluşuyor. Bu kararmaya neden olan svg formatında css kodlara  eklenmiş saydam bir dosya. Resmin üzerine geldiğinizde hover efekti sayesinde görünüyor ve mouseyi çektiğinizde tekrar kayboluyor.

Kullanım

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

Css :

body {
background-color:#333333
}
#cerceve{
 width:800px;
 height:80%;
 margin: 0 auto;
}
.resim_cerceve{
 cursor:pointer;
 float:left;
 margin-top:20px;
 margin-left:20px;
 border-radius:50%;
 border:5px solid #ffffff;
 box-shadow:2px 1px 15px -9px #000000;
 width:160px;
 height:160px;
 overflow:hidden;
}
.resim{
 position:absolute;
 border-radius:50%;
 width:160px;
 height:160px;
 overflow:hidden;
 padding:0;
 margin:0;
 border:0px solid #eeeeee;
 -webkit-transition:all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -moz-transition:all 0.5s ease;
 -o-transition:all 0.5s ease;
 transition:all 0.5s ease;
}
.resim img{
 border-radius:50%;
 margin-left:-20px;
 margin-top:-20px;
}
.resim_cerceve:hover .resim{
 width:160px;
 height:160px;
 border:5px solid #f98523;
 padding:15px;
 margin-left:-20px;
 margin-top:-20px;
}
.golge{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius:50%;
 overflow:hidden;
 -webkit-transition: background-color 0.3s ease-in-out;
 -moz-transition: background-color 0.3s ease-in-out;
 -ms-transition: background-color 0.3s ease-in-out;
 -o-transition: background-color 0.3s ease-in-out;
 transition: background-color 0.3s ease-in-out;
}
.resim:hover .golge{
 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
 background-color: rgba(0,0,0,0.4);
}
.aciklama{
 position: absolute;
 width:100%;
 bottom:30px;
 -moz-opacity: 0;
 -khtml-opacity: 0;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
 filter:alpha(opacity=0); 
 -webkit-transform: translate(0,100%);
 -moz-transform: translate(0,100%);
 -ms-transform: translate(0,100%);
 -o-transform: translate(0,100%);
 transform: translate(0,100%);
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}
.aciklama h2{font-size:1.2em; font-weight:800; color:#f98523;text-transform:uppercase; text-align:center;
}
.resim:hover .aciklama{
 margin-bottom:40px;
 -moz-opacity: 1;
 -khtml-opacity: 1;
 opacity: 1;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
 filter:alpha(opacity=100);
 -webkit-transform: translate(0,0);
 -moz-transform: translate(0,0);
 -ms-transform: translate(0,0);
 -o-transform: translate(0,0);
 transform: translate(0,0); 
}

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

Html :

<div id="cerceve">
 <div class="resim_cerceve">
 <div class="resim">
 <img src="https://lorempixel.com/200/200/sports/1/" />
 <div class="golge">
 <div class="aciklama">
 <h2>Baseball</h2> 
 </div> <!-- aciklama -->
 </div> <!-- golge --> 
 </div><!-- resim -->
 </div><!-- resim_cerceve -->