Efek Hover pada Deskripsi Gambar

Pengertian Efek Hover

Efek hover adalah efek perggerakan pada suatu objek yang akan membuat suatu objek terlihat aktif dan menarik. Efek hover bisa kita tambahkan pada gambar, sehingga gambar terlihat atraktif dan lebih cantik. Hal ini karena efek hover memberikan efek pergerakan yang mambuat gambar terlihat hidup. Selain itu efek hover pada gambar dapat diisi dengan deskripsi dan link aktif yang dapat dihubungkan pada suatu halaman tertentu. Kali ini saya akan menjelaskan cara membuat deskripsi gambar menggunakan efek hover yang akan menjadi daya tarik tersendiri bagi penampilan blog anda. Trik ini juga tidak memberatkan loading blog, dijamin. Sebagai tambahan referensi, silahkan baca artikel Tombol Demo Disertai Gambar. Baiklah, sekarang mari kita bahas cara membuat efek hober pada deskripsi gambar. Ikuti langkah berikut.

DEMO

Cara membuat deskripsi gambar dengan efek hover

• Log in ke blog anda. Jangan blog tetangga ya, nanti malah gak nyambung
• Klik Template
• Klik Edit HTML
• Masukkan kode css di atas kode ]]></b:skin>

CSS

.bakso-mainpage{padding:30px 0; max-width:520px; margin:0 auto}
.bakso-mainpage-box{font-size:13px; line-height:1.5em; text-align:center}
.bakso-mainpage-box >h3{text-transform:uppercase; font-family:'Open Sans Condensed',sans-serif}
.bakso-item{padding:10px; display:inline-block; text-align:left}
.bakso-item-wrapper{position:relative; padding:7px; background:#E8D7B6}
.bakso-item-image{position:relative; overflow:hidden}
.bakso-item-image img{display:block}
.bakso-item-title{position:absolute; left:-10px; bottom:17px; background:#FF6B0E; color:#FFF; font-size:1.4em; line-height:1.5em; font-weight:normal; padding:7px 9px 6px; text-transform:uppercase; font-family:'Oswald',sans-serif}
.bakso-item-overlay{background:#000; opacity:0; position:absolute; width:100%; height:100%; top:0; left:0; -webkit-transition:opacity 0.5s ease-in 0s; -moz-transition:opacity 0.5s ease-in 0s; -o-transition:opacity 0.5s ease-in 0s; transition:opacity 0.5s ease-in 0s}
.bakso-item-wrapper:hover .bakso-item-overlay{opacity:0.3}
.bakso-item-button{height:50px; width:50px; text-align:center; position:absolute; left:50%; margin-left:-25px}
.bakso-item-button a{border-radius:50%; -webkit-border-radius:50%; background:#FF6B0E; text-transform:uppercase; font-family:'Oswald',sans-serif; color:#FFF; font-size:1.2em; line-height:50px; -webkit-transition:all 0.2s ease-in 0s; -moz-transition:all 0.2s ease-in 0s; -o-transition:all 0.2s ease-in 0s; transition:all 0.2s ease-in 0s; text-decoration:none !important; display:block}
.bakso-item-button a:hover{background:#3b3b3b}
.first .bakso-item-button{-webkit-transition:all 0.5s ease-in 0.5s; -moz-transition:all 0.5s ease-in 0.5s; -o-transition:all 0.5s ease-in 0.5s; transition:all 0.5s ease-in 0.5s; top:-50px}
.first .bakso-item-wrapper:hover .bakso-item-button{top:20%}
.second{overflow:hidden}
.second .bakso-item-wrapper .bakso-item-title{-webkit-transition:all 0.2s ease-in 0s; -moz-transition:all 0.2s ease-in 0s; -o-transition:all 0.2s ease-in 0s; transition:all 0.2s ease-in 0s}
.second .bakso-item-wrapper:hover .bakso-item-title{left:-100%}
.second .bakso-item-description{position:absolute; width:100%; height:100%; padding:10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; background:rgba(0,0,0,0.4); color:#fff; top:100%; -webkit-transition:all 0.5s ease-in 0s; -moz-transition:all 0.5s ease-in 0s; -o-transition:all 0.5s ease-in 0s; transition:all 0.5s ease-in 0s}
.second .bakso-item-wrapper:hover .bakso-item-description{top:0}

• Selanjutnya klik Simpan Template
• Jika anda ingin menampilkan deskripsi gambar pada posting, silahkan gunakan html berikut.

HTML

<div class="bakso-mainpage-box span6">
<div class="bakso-item second">
<div class="bakso-item-wrapper">
<div class="bakso-item-image">
<img alt="JUDUL GAMBAR ANDA" src="ALAMAT GAMBAR ANDA" title="JUDUL GAMBAR ANDA" />
<div class="bakso-item-description">
Nama: NAMA GAMBAR ANDA.
Deskrips:
1. deskripsi 1
2. deskripsi 2
3. deskripsi 3

<div class="bakso-item-button">
<a href="ALAMAT LINK ANDA" target="_blank">View</a></div>
</div>
</div>
<div class="bakso-item-title">
JUDUL GAMBAR ANDA</div>
</div>
</div>
</div>

• Ganti kode berwarna kuning sesuai petunjuk
• Selanjutnya klik publikasikan
• Selesai dan kini gambar anda sudah dilengkap deskripsi dengan efek hover yang cantik

Nambah dikit ya gan...
Kalau anda mau memasukkan kode keseluruhan secara langsung untuk membuat efek hover pada deskripsi gambar cantik di blog, Anda juga bisa menaruhnya di sidebar, maka akan tambah menarik...di coba aja gan. Silahkan masukkan css dan html pada posting area ketika ingin mempbuat artikel. Caranya masuk pada mode HTML (sebelah tombol Compose pada kiri atas). Kalau anda menggunakan cara ini, anda tidak perlu lagi menggunakan cara di atas. Silahkan download script lengkapnya

Demikian penjelasan cara membuat efek hover pada deskripsi gambar di blog. Semoga artikel ini bermanfaat bagi semua, amin. selamat mencoba dan sukses selalu. Salam sahabat blogger.

Sumber: http://www.seocips.com/2014/08/membuat-animasi-hover-dan-deskripsi.html

Share this post