7.9.14
21
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..!!).

Gambar efek animasi

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/AVvXsEg9qin1ZhzixGvb1ZeVSMpjveXnKnMeFNfIopX2MUKSLa0qbUz6bxTHHKRpQJh4DryIiWeV44MSGLTAHny0t1dNN6N3KtRjMLKQQM-L8KTuil8JLYSUuANesro4f-2w8SNgJaQ0eLWyXKM/s1600/mobil-1.jpg" width="240" height="165"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHyTP6332fMY00SddqCrj0_Ave5xFQa4WJ0BLEoXp_fEBUNC7qAEWB6J7cZvrF4Egera0jnzQp_8QkseIHfpoaTeKDitwyM9eygUGJry2LYm0MdrtMaiS4-9neYPhfTnPm4n8nHScW6bU/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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menampilkan Gambar Berbeda Saat Hover
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

21 komentar

  1. buat kalimat pembuka.. @-) :o

    masih bingung..!, cssnya mesti disimpan di template ya..atau kode2nya disatukan di html postingan..penggabungan antara gambar pertama bagaimana,..

    BalasHapus
  2. sebuah pilihan mas, jika deteksi pada W3C validator css yang kita simpan pada postingan itu tidak valid,

    mas bisa satukan saja pada HTML postingan, karena ini berkaitan dengan gambar posting

    BalasHapus
    Balasan
    1. sukses..baru liat tadi saat kode html gambar dicopy..trnyata disitu ada penempatan gambar yg lain.. mau liat tiidakk..!?. profil di footer..promosi..

      Hapus
    2. cantikkan? gambar yg ke2 nya.. :d

      Hapus
    3. hehe..!! kok pakai DP saya sih,ntar gak bisa tidur loh mas kalau sering lihat..hehe (just kidding)

      Hapus
  3. Menarik dan berpariatif yah Mbak Devy.. gambar postingan
    isa ada nilai seninya, dengan sentuhan Effects tooltip yang halus dan cantik (f)

    BalasHapus
  4. duh mengunjungi Blog sampean jadi pingin ngutak atik tampilan blog lagi nih

    baiklah aku buka-buka arsip lainya dah

    BalasHapus
    Balasan
    1. gak apa-apa asal yang diotak-atik blog sampean, jangan blog ane ya,,hehehe..

      selamat mengotak-atik dah.!

      Hapus
  5. Mantap mbak devy..
    top markotop

    BalasHapus
  6. wah. nambah ilmu lagi nih. makasih.

    BalasHapus
  7. tutorialnya boleh dipraktekan untuk memasang beberapa gambar di satu tempat

    BalasHapus
  8. Penasaran pingin coba..cuma masih belum paham..nih mbak...hehe

    Tolong di bantu ya mbak :)

    BalasHapus
    Balasan
    1. saya akan bantu mbak, tanyakan saja dimana/bagaian mana kesulitannya.?

      Hapus
  9. Salam kenal, kunjungan perdana nih mbk :)

    BalasHapus
  10. Mantap mbak devy. .

    http://www.deanara16.com/2014/09/anizan-alternatif-google-adsense.html

    BalasHapus
  11. keren ya...
    bisa menampilkan gambar berbeda saat gambar pertama di hover (h)

    BalasHapus
    Balasan
    1. belum begitu sempurna kok tampilannya [-(

      Hapus
  12. salam kenal ya terimakasih sharing nya akan saya coba

    BalasHapus
  13. salam kenal gan
    artikel yang sangat menarik dan bermanfaat gan
    lanjutkan terus gan
    http://BestOdds123.com
    terima kasih

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK