Tampilkan Foto Kecil Saat Gambar Utama Dihover

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
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 >>

http://sahabatblogger77.blogspot.com/2014/10/tampilkan-foto-kecil-saat-gambar-utama-dihover.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77