Biasanya animasi seperti ini dipakai oleh blog untuk menggambarkan dan memberikan deskripsi pada barang atau produk yang di promosikan. Sebelumnya juga mengenai memberikan efek seperti ini pada gambar tapi sedikit berbeda, yaitu tentang membuat gambar dengan panel deskripsi efek slide.
LIVE DEMO Animasi Hover dan Deskripsi
Animasi Hover dan Deskripsi

Animasi Hover dan Deskripsi Pada Gambar diBlog
[SUSHI]
1. Lorem
2. Ipsum
3. Dolor: This year for the event, my group and I thought to do 7 different cover art for our books. So it would be the same artbook, but with 7 different book covers to choose from XD! I tried to go for a cute look with my cover
[SUSHI]
1. Lorem
2. Ipsum
3. Dolor: This year for the event, my group and I thought to do 7 different cover art for our books. So it would be the same artbook, but with 7 different book covers to choose from XD! I tried to go for a cute look with my cover
Sushi Comic Book
TUTORIAL Animasi Hover dan Deskripsi
1. Di blogger anda.2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode
4. Lalu tambahkan script CSS berikut ini tepat diatas kode
.jm-mainpage { padding:30px 0; max-width:520px; margin:0 auto; }Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.
.jm-mainpage-box { font-size:13px; line-height:1.5em; text-align:center; }
.jm-mainpage-box > h3 { text-transform:uppercase; font-family:'Open Sans Condensed',sans-serif; }
.jm-item { padding:10px; display:inline-block; text-align:left; }
.jm-item-wrapper { position:relative; padding:7px; background:#E8D7B6; }
.jm-item-image { position:relative; overflow:hidden; }
.jm-item-image img { display:block; }
.jm-item-title { position:absolute; left:-10px; bottom:17px; background:#FF6B0E; color:#FFFFFF; font-size:1.4em; line-height:1.5em; font-weight:normal; padding:7px 9px 6px; text-transform:uppercase; font-family:'Oswald',sans-serif; }
.jm-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; }
.jm-item-wrapper:hover .jm-item-overlay { opacity:0.3; }
.jm-item-button { height:50px; width:50px; text-align:center; position:absolute; left:50%; margin-left:-25px; }
.jm-item-button a { border-radius:50%; -webkit-border-radius:50%; background:#FF6B0E; text-transform:uppercase; font-family:'Oswald',sans-serif; color:#FFFFFF; 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; }
.jm-item-button a:hover { background:#3b3b3b; }
.first .jm-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 .jm-item-wrapper:hover .jm-item-button { top:20%; }
.second { overflow:hidden; }
.second .jm-item-wrapper .jm-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 .jm-item-wrapper:hover .jm-item-title { left:-100%; }
.second .jm-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 .jm-item-wrapper:hover .jm-item-description { top:0; }
<div class="jm-mainpage-box span6">Bagaimana sob? apakah sobat berhasil Membuat Animasi Hover dan Deskripsi Pada Gambar Blog ? nah sekian tutorial blog untuk saat ini, jangan lupa lihat tutorial blog terbaru lainnya dari seocips dan semoga bermanfaat.
<h5>
DEMO 2</h5>
<div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Cofee Capucino" src="http://1.bp.blogspot.com/-v2pD2GrJL8M/U_aax8owciI/AAAAAAAACDI/QO8qxJJTt0g/s1600/seocips22.jpg" />
<br />
<div class="jm-item-description">
Lorem ipsum dolor sit amet.<br />
1. Lorem<br />
2. Ipsum<br />
3. Dolor
<br />
<div class="jm-item-button">
<a href="http://blog.spezer.net/2014/08/membuat-animasi-hover-dan-deskripsi.html">View</a></div>
</div>
</div>
<div class="jm-item-title">
Cofee Capucino</div>
</div>
</div>
</div>
</div>
5 Komentar untuk "Membuat Animasi Hover dan Deskripsi Pada Gambar Blog"
Animasi hover nya ada yg lain g gan?
coba cek postingan sebelumnya yang ini gan, http://blog.spezer.net/2014/07/cara-membuat-efek-gambar-dengan-panel.html
kerennn langsung di coba dulu gan,thanks
gan, kalo dua gambar secara berdampingan gimana gan ??? :-? soalnya saya mau pake 2 atau 3 gambar secara berdampingan dengan url view yang berbeda.
Makasi gann tipsnya :D anee comot dah !!