Membuat Efek Gambar saat di sentuh

Membuat Efek Gambar saat di sentuh.Trik kali ini membahas tentang css lagi, kali ini kita akan membuat efek gambar saat di sentuh mouse. tentu efek ini sangat bagus dan elegan untuk anda gunakan di blog atau website.

seperti sebelumnya efek gambar ini hanya menggunakan kode css dan html untuk implementasinya , jadi tidak memberatkan loading blog atau website anda.
untuk lebih jelasnya berikut ini contoh atau demo nya:


1.Efek gambar yang pertama



itu lah contoh efek gambar nya, silahkan di praktekin dan di pakai untuk animasi efek gambar di blog atau website sobat.
untuk cara-caranya adalah:
letakkan kode css berikut ini di antara <head> di sini letak kode css</head>.

nah berikut ini kode css nya
1.letakkan di atas </head> yaa
<style>

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
 
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
 
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
 
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
 
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}

</style>

2.simpan template anda.
3.setelah selesai, lanjut ke kode html,berikut ini kode html nya:
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="url gambar utama" />
<img class="ondemand" src="url gambar efek yang muncul" />
</div>
pada kode html di atas, yang warna biru adalah lebar dan tinggi gambar utama, atau gambar yang terlihat .
setelah di sentuh akan menimbulkan efek gambar kedua, jadi gambar pertama bisa anda buat icon atau gambar ukuran kecil untuk memperindah efeknya.
nah untuk gambar kedua , usahakan ukuran gambar lebih besar dari ukuran gambar pertama.

cukup seperti itu saja, cukup mudah kan. dan jika sobat ada kendala untuk menerapkan di blog atau website, silahkan bertanya di kotak komentar aja.