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:
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:
Sekarang kita coba dengan tampilan yang berbeda, menggabungkan perintah CSS-animasi untuk menghasilkan gaya tampilan gambar saat di hover dengan elemen perintah seperti ini:
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.
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;
}
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:
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/AVvXsEjMznoq6f96_G2oT_aOdX2EcCeTABRUHAcmKRWZO87jiSjXsDa7-HYVRpQBObhcT1fVTZZNimNZVPqhyphenhyphen5Faeb7A5-GKwjxrfK6vmW0whStDPdJj8Kld-fYAPszRLc0R2Qa6BsBc9Sz2w84/s1600/mobil-1.jpg" width="240" height="165"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-dODXSSyrD47kWWrOyna67FWTy9p0z7I0WcfIWQsypmfwKhE5VnSWS0pQ0N2NZFkCQ3PDnA3onCuVC5pgDkxpqkAIvveApWfW_8LeI05SfDX0ULJbchn93-jAkMUaezEYVq211TyDZ8o/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:
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
Demikian artikel tentang Menampilkan Gambar Berbeda Saat Hover ini dapat kami sampaikan, semoga artikel atau info tentang Menampilkan Gambar Berbeda Saat Hover ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
