Pasang Iklan Banner
Promo hari ini 👉 Buruan sebar iklan massal murah ke 1.000 website, hanya 150 ribu! 👉 Posting iklan di website Iklan Sulawesi Utara ini hanya Rp10.000 rupiah iklan tampil selamanya, hubungi Kami! 👉 Jangan sungkan untuk kerjasama lainnya, hubungi Kami juga!
/ / Efek Keyframes Show Pada Gambar Hover
thumbnail

Efek Keyframes Show Pada Gambar Hover

Image Effect
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 -

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

Sebar Iklan Massal Murah