Hover Image Dengan CSS3 Transition

Pure effect image hover with css3. seperti artikel saya terdahulu mengenai efek hover image dengan css3 . namun kali ini kita akan memberikan efek berbeda dengan transition cubic bezier. cara kerjanya hampir sama denganb efek menggunakan easing jquery bounce.

DEMO (Arahkan Mouse Pada Gambar)

Coba Sendiri

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">
    <div class="view effect">
         <a href="#"><img src="image.jpg" /></a>
         <div class="mask"></div>
    </div>              
</div>

keterangan :
<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.

.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;
}

Keterangan efek :
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).

.effect img {
  opacity:0.2;
  -moz-transition:all 0.3s ease-in;
}

Tentukan animasi pada property <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.

.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);
}

selection :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.

.effect:hover .mask {
  border:0 double rgba(0,0,0,0.7);
  opacity:0;
  visibility:hidden;
}
.effect:hover img {
  opacity:1;
}

Semoga artikel ini bisa bermanfaat untuk mengenal lebih jauh tentang efek hover pada gambar. terima kasih atas kunjungannya.
pranala luar.
Pure CSS3 Images Hover

---

Post By : denzdii