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)
css3-image-hover
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

license by under 88 blogspot.com
Post By : denzdii

8 comments:

  1. Mohon Maaf Lahir Bathin Ya Gan !!! :D

    http://kkcdn-static.kaskus.co.id/images/2012/08/15/2531538_20120815095304.gif

    ReplyDelete
  2. keren nih....
    minal aidzin walfaidzin...

    ReplyDelete
  3. waw , keren bgt \m/

    visit back ya , www.dharmanacyber.com

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top