pop-up image hover

Tampilkan Foto Kecil Saat Gambar Utama Dihover - Cara ini sama halnya dengan membuat gambar duplikat, namun hanya satu gambar yang di tampilkan sebagai gambar utama, dan saat dihover maka akan menampilkan foto kecil yang terlihat diatas sebelah kanan gambar utama dengan efek pop-up (melayang). Seperti membentuk susunan daftar link pada blog Anda yang kurang lebih tampak seperti ini:


a:link {color:blue;text-decoration:none}
a:link:active {text-decoration:none}
a:link:hover {color:red;text-decoration:underline}


Jika Anda perhatikan susunan tampilan daftar link diatas, maka akan menghasilkan fungsi deklarasi seperti ini:

a:link
Warna teks link yang terlihat pada blog berwarna BIRU tanpa diberi garis bawah pada link (text-decoration:none).

a:link:active
Semua link yang ditampilkan pada blog tidak diberi garis bawah, termasuk link pada menu navigasi, link pada popular post dan link pada related post (semua link).

a:link:hover
Hover merupakan sentuhan mouse yang sudah Anda berikan efek warna berbeda dengan tampilan pada link:active, yang saat link di hover maka akan berubah warna menjadi MERAH dan teks pada link diberi garis bawah (text-decoration:underline).

Pertemuan kali ini, saya akan coba menggunakan atribut link diatas untuk Menampilkan Foto Kecil Saat Gambar Utama Dihover dengan mengubah semua nilai pada elemen link tersebut menggunakan background:gambar dengan CSS seperti ini:



.pictures {
  background: url(http://URL-Gambar.jpg) 0 0 no-repeat;
  z-index: 2;border:inset 3px red;
  width: 320px;height: 427px;
  margin: 0 auto;
  position: relative;}

.pictures:hover .popup-img,
.pictures:active .popup-img {
  opacity: 1;
  /*gunakan kode untuk mendukung semua vendor peramban*/
  transform: scale(1);}

.pictures:hover .popup-img:hover,
.pictures:hover .popup-img:active,
.pictures:active .popup-img:hover,
.pictures:active .popup-img:active {
  /*gunakan kode untuk mendukung semua vendor peramban*/
  transform: scale(1.1);}

.popup-img {
  position: absolute !important;
  top: 0;border:inset 3px red;
  right: 0;color:lime;
  width: 140px;height: 200px;
  text-shadow: 0.1em 0.1em 0.05em darkblue;
  line-height: 362px;
  margin: -60px -60px 0 0;
  text-align: center;
  background: url(http://URL-Gambar.jpg) 0 0 no-repeat;
  opacity: 0;
  /*gunakan kode untuk mendukung semua vendor peramban*/
  transform: scale(0.7);
  transition: 0.2s;}




DEMO SHOW




Bagaimana, pekerjaan yang cukup mudah bukan.? hehe..!!! Karena saya pernah membuat beberapa efek gambar diartikel saya sebelumnya tentang Membuat Gambar Dengan Efek Flip Animasi, yang saat gambar utama di hover akan menampilkan descripsi singkat dengan efek flip (membalik posisi gambar utama). Dan untuk efek gambar kali ini, saya menampilkan foto kecil dengan efek pop-up, selanjutnya tinggal memanggil fungsi bentuk CSS diatas dengan menggunakan kode HTML seperti ini:


<div class="pictures" onclick="">
    <div class="popup-img">
        Sahabat Blogger 77
    </div>
</div>


Tampilan blog yang cantik dan menarik adalah mutlak yang harus kita miliki, bukan hanya sekedar mengejar bagaimana mempercepat loading blog, tetapi dengan memiliki blog yang cantik dan rapi, akan membuat pengunjung betah berlama-lama di blog Anda. Sebagai bahan referensi, saya akan berikan beberapa tutorial efek yang dapat Anda jadikan inovasi pilihan dalam mendesain tampilan blog Anda pada link di bawah ini:

Efek Zoom Gambar Mode Slide Teks
4 Variasi Slide Teks Pada Gambar
Menampilkan Bayangan Teks Saat Hover


Semoga ter-inspirasi, selamat bermalam minggu guys...!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tampilkan Foto Kecil Saat Gambar Utama Dihover
Ditulis oleh= Devy Indriyani
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 =

23 komentar

  1. Jadi pingin coba biar keliat tambah cantik kayak blognya mbak Devy
    Terima ksh ya mbak :)

    BalasHapus
    Balasan
    1. Betul Mbak Susi dengan artikel tutorialnya Mbak evy ini
      Bisa membuat gambar postingan jadi menarik dan cantik :)

      Hapus
    2. sama-sama mbak susi, terimakasih juga sudah berkunjung.

      Hapus
    3. karena mayoritas setiap artikel yang di publikasikan pasti selalu menyertakan gambar di dalamnya, jadi sedikit mempercantik tampilan gambarnya mas saud, biar pengunjung betah melihat-lihat isi blog kita, hehe..

      Hapus
    4. saya juga ikutan nyoba ya mbak santy mudah mudahan berhasil

      Hapus
  2. Keren yah Mbak Devy, gambar postingan jadi kelihatanya
    Jadi cantik,, dengan trik ini, apalagi diatas gambar postinganya
    Cantik sekali. itu foto aslinya Mbak Devy bukan yah..?

    BalasHapus
    Balasan
    1. hehe...foto 2 tahun yang lalu sih mas, sedikit di edit, biar kelihatan lebih cerah gitu?
      (type 360 gitu dech)

      Hapus
  3. saya tampil sederhana saja deh gan, yg penting banyak pengunjung..

    BalasHapus
    Balasan
    1. lebih asyik 22nya mas,blognya cantik dan pengunjungnya ramai

      Hapus
    2. setuju mas yanto, karena blog yang cantik sudah pasti banyak yang suka, apalagi di dukung dengan speed yang tidak mengganggu alias "LELET"

      Hapus
    3. blognya cantik, adminnya cantik sudah pasti ramai pengunjung mas :-)

      Hapus
  4. sangat bermanfaat untuk mempercantik blog...:)

    BalasHapus
  5. wah jadi kelihatan keren yambak
    eh foto siapa sih itu mbak?

    BalasHapus
    Balasan
    1. foto devy mas, tetapi sudah diedit menjadi kamera 360, tadinya mau menghilangkan itu, tahi lalat disebelah mata kiri,hehe...ehh nyatanya kagak mau juga hilang walaupun sudah di poles dalam editan..

      Hapus
    2. mau pake jasa saya mbak :d

      Hapus
  6. Cantik fotonya #gagalfokus

    BalasHapus
  7. sipsip bermanfaat sekali

    BalasHapus
  8. nyimak iya mbak devy hehe

    BalasHapus
  9. Aiiih keren pisan euuuy. Tampilan jd lebih menarik ya dengan tips di atas. Thanks tuk sharenya :)

    BalasHapus
  10. tambah cantik tampilan blognya dengan hover foto, secantik yang ngasih tutorial ... ihirrr....

    BalasHapus
  11. bagus tuh mbak... dan cssnya pun tidak sulit tuk di fahami....

    BalasHapus
  12. benerAN keren waktu saya liat demonya.
    kepengen coba ahhh,,

    BalasHapus
  13. wah keren sekali mbak efek hover imagenya, bisa dicoba sewaktu2. terimakasih sekali infonya, salah kenal

    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