Efek Hover pada Gambar Disertai Teks Tersembunyi

Pengertian Efek Hover Gambar

Efek hover pada gambar adalah sebuah efek pergerakan dari pseudo-classes yang berfungsi untuk memberikan tampilan (style) tertentu pada selector. Efek hover akan berjalan atau berfungsi ketika mouse bersentuhan dengan objek, sehingga objek terlihat aktif dan menarik. Jadi pemahaman dasar efek hover pada gambar adalah efek pergerakan (pseudo-classes) pada gambar. Fungsi efek hover pada gambar ini agar gambar dapat bergerak aktif dan diolah menjadi tingkat perubahan tertentu agar menarik sesuai desain yang diinginkan. Sebenarnya text tersembunyi dibalik gambar itu sudah ada, hanya trick pemunculannya saja yang diatur belakangan, yaitu setelah efek hover pada gambar dimuat secara keseluruhan. Gimana bingung ya gan? heheheheee...kalau begitu saya juga bingung karena telalu panjang menejelaskannya. Baiklah kita mulai saja membahas trick membuat efek hover pada gambar disertai teks tersembunyi. Ikuti Lang kah berikut.

Posting ini sebagai jawaban dari pertanyaan sahabat inkekura blog. Sebenarnya pertanyaannya mengenai dialog box dengan efek hover yang diminta memuat gambar terlebih dahulu lalu menampilkan tulisan pada dialogblog tersebut. Namun kalau saya membuat gambar muncul terlebih dahulu saya harus membuat span pada selektor dalam html lalu memunculkan tulisan yang dapat bergerak dengan penggunaan javascript. Saya rasa itu akan memberatkan widget itu sendiri ketika diloading. Makanya saya hanya membuat menggunakan pseudo-class dan pseudo-elemen. Disamping itu saya rada gagap ketika dihadapkan dengan javascript. Maklum, masih belajar gan...heee. Kalau mau melihat komentarnya silahkan klik di sini.

Cara membuat efek hover gambar disertai teks tersembunyi

• Log in ke blog anda
• Klik Template
• Klik Edit HTML
• Masukkan kode CSS di atas kode ]]></b:skin> atau </style>

DEMO

/* CSS gambar vertikal */
.martabak-telor, .martabak-telor2{height:220px; width:150px; margin:20px auto;padding:20px; background:#333; border:6px solid transparent; opacity:0.6; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; margin:10px; padding:3px; overflow:hidden; border-radius:6px; position:relative; float:center; box-shadow:1px 1px 10px #fff}
.martabak-telor:hover, .martabak-telor2:hover{height:265px; border-color:#333; background:#fff; opacity:1.0; -o-transform:scale(1.3); -moz-transform:scale(1.3); -webkit-transform:scale(1.3); z-index:9}
.martabak-telor img, .martabak-telor2 img{width:140px; height:210px; margin:0; padding:0; border:4px solid #777; border-radius:4px}
.martabak-telor p, .martabak-telor2 p{font-family:Tahoma; font-size:12px; color:#9CF; background:#333; padding:12px 6px; border-radius:4px; border:1px solid #444; height:15px; box-shadow:0px 1px 2px #222; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; overflow:hidden; margin:0 2px 4px; text-align:center}
.martabak-telor p:hover, .martabak-telor2 p:hover{-o-transform:scale(1.0) translate(0,-222px); -moz-transform:scale(1.0) translate(0,-222px); -webkit-transform:scale(1.0) translate(0,-222px); height:237px; border-color:#34495e; background:#222; border-color:#34495e; opacity:0.8; text-shadow:0px 1px 2px #000; font-size:10px}

/* CSS gambar horizontal */
.martabak-kacang, .martabak-kacang2{height:220px; width:560px; margin:20px auto;padding:20px; background:#333; border:6px solid transparent; opacity:0.6; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; margin:10px; padding:3px; overflow:hidden; border-radius:6px; position:relative; float:center; box-shadow:1px 1px 10px #fff}
.martabak-kacang:hover, .martabak-kacang2:hover{height:265px; border-color:#333; background:#fff; opacity:1.0;  -o-transform:scale(1.3); -moz-transform:scale(1.3); -webkit-transform:scale(1.3); z-index:9}
.martabak-kacang img, .martabak-kacang2 img{width:560px; height:210px; margin:0; padding:0; border:4px solid #777; border-radius:4px}
.martabak-kacang p, .martabak-kacang2 p{font-family:Tahoma; font-size:12px; color:#9CF; background:#333; padding:12px 6px; border-radius:4px; border:1px solid #444; height:15px; box-shadow:0px 1px 2px #222; -o-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out; overflow:hidden; margin:0 2px 4px; text-align:center}
.martabak-kacang p:hover, .martabak-kacang2 p:hover{-o-transform:scale(1.0) translate(0,-222px); -moz-transform:scale(1.0) translate(0,-222px); -webkit-transform:scale(1.0) translate(0,-222px); height:237px; border-color:#34495e; background:#222; border-color:#34495e; opacity:0.8; text-shadow:0px 1px 2px #000; font-size:10px}

• Selanjutnya klik Simpan Template
• Langkah pemasangan CSS sudah selesai. Sekarang lanjut kepada penggunaan HTML. Jika kalian ingin menampilakan efek hover pada gambar, gunakan kode di bawah ini.

Gambar Vertikal
<div style="margin: 20px auto; padding: 20px; background:#2c3e50;box-shadow:5px inset; height: 260px; position: relative; width: 190px; border-radius:6px; display: block;">
<div class="martabak-telor">
<img src="http://i745.photobucket.com/albums/xx97/bengkelblogger/hoverefekpadagambar_zps8487e52b.png" /><p><span>lihat teks</span><br /><br /><br />Bengkel blogger adalah tempat belajar dan berbagi bersama untuk kemajuan dunia blogging</p>
</div></div>

Gambar Horizontal
<div style="margin: 20px auto; padding: 20px; background:#2c3e50;box-shadow:5px inset; height: 260px; position: relative; width: 600px; border-radius:6px; display: block;">
<div class="martabak-kacang">
<img src="http://i745.photobucket.com/albums/xx97/bengkelblogger/efekhoverpadagambarbengkelblogger_
zps0c8d048f.png" /><p><span>lihat teks</span><br /><br /><br />Bengkel blogger adalah tempat belajar dan berbagi bersama untuk kemajuan dunia blogging</p>
</div></div>

• Edit kode merah sesuai kebutuhan
• Kalau sudah selesai, klik Publikasikan dan lihat hasilnya

Demikian penjelasan trick membuat efek hover pada gambar. Semoga bermanfaat bagi kita semua, amin. Salam sahabat blogger.

Share this post