Bir kaç saat önce aynı başlıkta buna benzer bir konu paylaşmıştık Css3 hover efekti diye. Bir önceki demo Css3 perspective kullanılarak hazırlanmış Css3 hover efektiydi. Şimdiki demo Css3 scale kullanılarak hazırlanmış bir resim galeri örneği. Css3 scale, nesneleri büyütmek yada küçültmek için kullandığımız bir özelliktir. Aynı mercek görevi gören bir özelliktir aynı zamanda. Genişliğini, yüksekliğini belirlemiş olduğunuz nesnelerin ölçeği 1 olarak kabul edilir. Küçültmek için sıfırın altında rakamlar kullanırız büyütmek içinse 1’den büyük rakamlar kullanırız. Şimdiki Css3 hover efektimizde ana ekranda görülen bir resim var ve ölçeğide 1 olarak ayarlanmış. Hemen arkasında ise resim ile alakalı bir başlık ve onun ölçeğide 0.5 olarak ayarlanmış. Mouse ile resmin üzerine geldiğinizde resim ölçeği 5 derece büyürken 140px de aşağı doğru iniyor. Resmin arkasında duran 0.5 ölçekl resim başlığı da 1 ölçek oluyor. Bu işlemler sırasında Css3 dönüşümler (transform) kullandığımız için animasyon şeklinde görülür. Bir anda büyüyüp bir anda küçülmüyorlar bu sayede.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölüm.
Css :
.container {
width: 990px;
margin: 150px; auto;
}
.cerceve {
position: relative;
width: 30%;
margin: 1%;
padding-bottom: 31%;
float: left;
overflow: hidden;
}
.cerceve .baslik {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 15px;
background:#333333;
}
.cerceve .baslik a {
text-align:center;
text-decoration:none;
font-size:30px;
margin-left:20px;
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}
.cerceve .baslik h1 {
width: 100%;
line-height: 50px;
font-weight: 100;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-transform: scale(0.5) skew(1deg);
-moz-transform: scale(0.5) skew(1deg);
-o-transform: scale(0.5) skew(1deg);
-ms-transform: scale(0.5) skew(1deg);
}
.cerceve:hover > .baslik h1{
-webkit-filter: grayscale(100%);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transform: scale(1) skew(1deg);
-moz-transform: scale(1) skew(1deg);
-o-transform: scale(1) skew(1deg);
-ms-transform: scale(1) skew(1deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
.cerceve > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
transition: all 1.5s;
}
.cerceve:hover > img {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
-webkit-filter: grayscale(100%);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transform: scale(5) skew(1deg) translateY(140px);
-moz-transform: scale(5) skew(1deg) translateY(140px);
-o-transform: scale(5) skew(1deg) translateY(140px);
-ms-transform: scale(5) skew(1deg) translateY(140px);
}
.cerceve:hover > .baslik img {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div class="container"> <div class="cerceve"> <div class="baslik"> <h1><a href="https://www.mintik.com/?p=14387">Css3 Hover Effect</a></h1> </div> <img src="resim1.jpg" /> </div> <div class="cerceve"> <div class="baslik"> <h1><a href="https://www.mintik.com/?p=14387">Css3 Hover Effect</a></h1> </div> <img src="resim2.jpg" /> </div> <div class="cerceve"> <div class="baslik"> <h1><a href="https://www.mintik.com/?p=14387">Css3 Hover Effect</a></h1> </div> <img src="resim3.jpg" /> </div> </div>