Efek Keyframes Show Pada Gambar Hover

Keyframes Image Effect

Efek Keyframes Show Pada Gambar Hover - Mendesain Gambar atau sekedar mengubah tampilan gambar menjadi seakan hidup itu banyak yang melakukannya dengan aplikasi photoshop, namun efek gambar kali ini saya menggunakan kode elemen HTML yang sudah tidak asing lagi bagi kita yaitu KEYFRAMES, yang saya padukan dengan efek hover sebagai penggerak gambar

@keyframes showMe {
      0%  { visibility: visible; z-index: 100; }
 12.5%  { visibility: visible; z-index: 100; }
    25%  { visibility: hidden; z-index: 0; }
  100%  { visibility: hidden; z-index: 0; }
}

Artikel terkait -

Efek Slide Show Otomatis Pada Gambar

Seperti LAYAR TANCAP yang hanya menggunakan klise film role yang disorot dengan lensa proyektor mengarah kelayar, maka gambar akan bergerak layaknya seperti menonton seri drama, karena pada blog tidak ada proyektornya saya menggunakan panah mouse untuk menggerakkan gambar (Pointer Hover) seperti yang terlihat pada tombol DEMO SHOW dibawah ini



DEMO SHOW

Pembetukan Rangka elemen CSS

Disini saya hanya menggunakan 5(lima) gambar sebagai contoh, selebihnya Anda bisa menambahkan gambar sebanyak yang anda mau, atau mau membuat film seperti layar tancap mungkin, hehe..!! Kode berikut sudah saya susun dengan kecepatan slide gambar dengan animation-delay: 0.1s (sangat cepat)
Berikut kodenya -

.hs-wrapper{
  width: 333px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.5);}

.hs-wrapper img{
  top: 0px;
  left: 0px;
  position: absolute;
  -webkit-animation: showMe 0.8s linear infinite 0s forwards;
  -moz-animation: showMe 0.8s linear infinite 0s forwards;
  -o-animation: showMe 0.8s linear infinite 0s forwards;
  -ms-animation: showMe 0.8s linear infinite 0s forwards;
  animation: showMe 0.8s linear infinite 0s forwards;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;}

.hs-wrapper img:nth-child(1) {z-index: 9;}
.hs-wrapper img:nth-child(2){
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  -ms-animation-delay: 0.1s;
  animation-delay: 0.1s;
  z-index: 8;}

.hs-wrapper img:nth-child(3){
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
  z-index: 7;}

.hs-wrapper img:nth-child(4){
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  animation-delay: 0.3s;
  z-index: 6;}

.hs-wrapper img:nth-child(5){
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
  z-index: 5;}
//gambar selanjutnya
. . .

.hs-wrapper:hover img{
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -o-animation-play-state: running;
  -ms-animation-play-state: running;
  animation-play-state: running;}

@-webkit-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@-moz-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@-o-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@-ms-keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

@keyframes showMe {
      0% { visibility: visible; z-index: 100; }
 12.5% { visibility: visible; z-index: 100; }
    25% { visibility: hidden; z-index: 0; }
  100% { visibility: hidden; z-index: 0; }}

Tahap Akhir elemen HTML

Pada kode HTML berikut, silahkan Anda ganti gambar dengan URL-gambar Anda, namun penting untuk diketahui agar gunakan gambar dengan format [dot]jpg dengan rotasi 333x500px, dan selebihnya tambahkan gambar sebayak yang Anda mau sesuai keinginan

<div class="hs-wrapper">
<img alt="image01" src="http://image01.jpg" />
<img alt="image02" src="http://image02.jpg" />
<img alt="image03" src="http://image03.jpg" />
<img alt="image04" src="http://image04.jpg" />
<img alt="image05" src="http://image05.jpg" />
</div>

Jika Anda pernah melihat ada sebuah iklan di-TV, yang mana ada anak kecil menggambar detik-detik perubahan kepompong menjadi kupu-kupu, 1 gambar 1 halaman dan setelah lembaran halaman dibuka secara cepat satu per satu, maka gambar tersebut seakan menggambarkan peristiwa perubahan kupu-kupu itu, nah dari sanalah ide ini muncul sehingga saya posting untuk sahabat semua pecinta SAHABAT BLOGGER 77.

Semoga tutorial ini dapat meng-inspirasi sahabat semua. Terimakasih..!! sampai ketemu diartikel saya selanjutnya tentang Efek Hover Gambar Dengan Desain Buka Tutup