Menampilkan Gambar Berbeda Saat Hover

Menampilkan Gambar Berbeda Saat Hover - Apakah Anda selalu Menampilkan Gambar di setiap postingan blog?, namun coba sentuh (hover) gambar tersebut, apa yang terjadi?. Tutorial kali ini saya akan coba menciptakan ilustrasi untuk menampilkan gambar berbeda (Gambar ke- 2) saat gambar di postingan Anda di hover oleh mouse, sehingga Anda mempunyai 2 buah gambar, namun yang terlihat hanya 1 gambar yang tampil, karena gambar yang kedua sudah disembunyikan jauh yang tidak dapat di jangkau oleh tangan kita, tetapi dengan cepat akan datang saat Anda memanggilnya untuk menemani gambar pertama. (setia banget ya gambarnya, hehe..!!).

Pertama kita rangkai dahulu media penyimpanan untuk gambar kedua dengan pengaturan CSS position seperti ini:

img2 {
  position: fixed !important;
  position: absolute; /*internet expoler-6*/
 
  //lay-out posisi tampil
  top: -1000px;
  left: -980px;
  bottom: -1000px;

  //jarak tampilan gambar
  padding:0 15px 0 0;
  margin: 0 auto;
}

Maka untuk Menampilkan Gambar Berbeda Saat Hover sudah bisa Anda nikmati dengan berbagai gaya seperti tombol DEMO SHOW di bawah ini:




DEMO SHOW



Saatnya menampilkan ilustrasi tersebut untuk menampilkan gambar kedua, hanya jika gambar pertama di hover dengan CSS seperti ini:

#descript span {display: none;}
#descript a:hover span {
  position:absolute;
  margin:0 0 0 -240px;
  display: inline;
  -webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  -ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
  transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}

<div id="descript">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlKtsWq5t6a5fqjOPzU5FnJIf-g8sTvELXFIORyPgqpbNQbHmIw60HHYA2-64IOVenApaQqxs1Bd6VIJ_J0ap9vAF2QS22gtYSmkZIH2KiDn57Svuw2NlGX12Z6QAH_EkO1K-ZrO1GaB8/s1600/mobil-1.jpg" width="240" height="165"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-QVE3FAQ83tSwNbGAEFccW6y-XY-3BkApL4CO9jGyyCR9noYBCevVilCkoN0PH-paVPzRW6Rh_myKhV6Oe7Rwc1Sd1OgwxYe4DgeJB3PGCQK4VBkHljff9im3tbpprOfRZQ-tjoW7boY/s1600/mobil-2.jpg" width="240" height="165"></span></a>
</div>

Sekarang kita coba dengan tampilan yang berbeda, menggabungkan perintah CSS-animasi untuk menghasilkan gaya tampilan gambar saat di hover dengan elemen perintah seperti ini:

#descript span {display: none;}
#descript a:hover span {
  position:fixed !important;
  position:absolute;
  display: inline;
  margin: 0 0 0 10px;
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;}


@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}}

Dan hasilnya:




DEMO SHOW



Bagaimana, menarik bukan.? hehe...!!
Seperti artikel sebelumnya tentang Mengubah Variasi Tooltip Dengan Efek Transisi. Hal ini sama dengan pekerjaan "TOOLTIP" yang menampilkan teks saat link dihover.

Jika Anda sudah Mengenal Elemen CSS Animasi Dan Transisi, maka saya yakin untuk menampilkan gambar yang berbeda dari tutorial kali ini akan dengan mudah Anda ciptakan.

Referensi URL - Memahami Dengan Mudah Bentuk Kinerja CSS Animasi