Pure effect image hover with css3. Kali ini kita akan memberikan efek berbeda dengan transition cubic bezier. cara kerjanya hampir sama denganb efek menggunakan easing jquery bounce.
Tutorial Efek Hover Gambar Dengan CSS3
HTML Markup yang di gunakan dengan beberapa property. harus ada pembungkus sebagai induk dari gambar-gambar di dalamnya. seperti HTML berikut ini.<div class="main">keterangan :
<div class="view effect">
<a href="#"><img src="image.jpg" /></a>
<div class="mask"></div>
</div>
</div>
<div class="view effect">
. ini property untuk meyeleksi atribut <img>
. dan efek hover akan kita buat kembali dengan HTML <div class="mask"></div>
. tanpa itu pun kita bisa membuat efek animasi. namun itu akan menyempitkan dan terbatas. secara luas CSS banyak animasi jika HTML sudah di tentukan.CSS
penggunan css tidak terlalu banyak. hanya efek transition cubic bezier, opacity (transparent) dan border.Keterangan efek :.main {
position:relative;
width:650px;
margin:0 auto;
padding:5px 10px;
}
/* seleksi gambar dengan mengatur berbagai.
ukuran,border,opacity,dan lain sebagainya */
.view {
width:300px;
height:200px;
margin:10px;
border:5px solid #fff;
overflow:hidden;
position:relative;
text-align:center;
box-shadow:0 0 5px #aaa;
cursor:default;
}
.view .mask {
width:300px;
height:200px;
position:absolute;
overflow:hidden;
top:0;
left:0;
}
.view img {
display:block;
position:relative;
}
/* hasilkan efek animasi
dengan memulai sesuatu pseudo element
dan berbagai efek trasition lainnya */
.effect img {
opacity:0.2;
-moz-transition:all 0.3s ease-in;
}
.effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620);
}
.effect:hover .mask {
border:0 double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.effect:hover img {
opacity:1;
}
pada awalnya gambar akan di buat tranparant dengan css opacity.
pengunaan
-moz-transition:all 0.3s ease-in;
untuk mozilla yang akan menentukan keseluruhan efek di hasilkan secara halus (smooth).Tentukan animasi pada property.effect img {
opacity:0.2;
-moz-transition:all 0.3s ease-in;
}
<div class="mask"></div>
dengan css berikut. karena inilah peran penting untuk membuat animasi yang berbeda. penggunaan bisa anda lihat di bawah. saya kurang tahu apa browser Chrome bisa mendukung transition cubic-bezier atau tidak, saya belum mencobanya.selection.effect .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620);
}
:hover
langkah akhir jika semua css animasi sudah di buat sebelumnya. dan menampilkan gambar yang tadinya di buat opacity:0.2;
menjadi opacity:1;
atau bisa anda tambahkan animasi lainnya pada posisi :hover
.Semoga artikel ini bisa bermanfaat untuk mengenal lebih jauh tentang efek hover pada gambar. terima kasih atas kunjungannya..effect:hover .mask {
border:0 double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.effect:hover img {
opacity:1;
}
Source : http://under-88.blogspot.com/2012/08/hover-image-dengan-css3-transition.html#axzz2LjxyRKJc