Hover Keterangan Gambar Dengan Css3 Pada Post

arahkan mouse anda pada gambar-gambar di bawah !


JUDUL GAMBAR PERTAMA
di sini tempat penjelasan gambar anda

JUDUL GAMBAR KEDUA
di sini tempat penjelasan gambar anda

JUDUL GAMBAR KETIGA
di sini tempat penjelasan gambar anda

cara membuat:

Memberi keterangan gambar pada post image akan membantu pembaca untuk mengetahui penjelasan dari gambar yang dimaksud, efek hover yang ditampilkan pada keterangan gambar berbentuk slide dari arah kiri ke arah kanan dan sebagai alternatif pilihan, efek hover ini bisa dari bawah ke atas, dan script yang digunakan menggunakan css level 3.

Menambahkan keterangan gambar pada post, tentu saja akan mempercantik tampilan blog, terutama untuk tampilan post. Script ini sangat cocok digunakan bagi mereka yang mempunyai blog dengan banyak penggunaan gambar sebagai penambah keterangan suatu posting (artikel). Kelebihan script ini karena menggunakan css, tentu saja penggunaannya mudah dan untuk hover keterangan gambar pun akan menyesuaikan ukuran dari gambar yang ditampilkan.

Untuk menerapkannya pada blog kalian, copy script css dibawah ini dan letakan diatas kode ]]></ b: skin>

CSS

#objek {
position:relative;
float:left;
margin:10px;
overflow:hidden;
}
.ket {
text-align:left;
border-radius: 0px 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;
-webkit-border-radius: 0x 25px 0px 0px;
width:80%;
height:auto;
padding:5px 10px;
background:#000;
opacity:0.6;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
font-size: 12px;
}
#objek .ket {
position:absolute;
bottom:0;
left:0;
margin-left:-1000px;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#objek:hover {
-moz-box-shadow:0px 0px 25px #000000;
-webkit-box-shadow:0px 0px 25px #000000;
box-shadow:0px 0px 25px #000000;
}
#objek:hover .ket {
margin-left:0px;
}

HTML

<div id="objek">
<img src="url gambar" />
<div class="ket">
<b>JUDUL GAMBAR</b><br />
keterangan/penjelasan dari gambar
</div>
</div>

Script tersebut diatas merupakan efek hover dari kiri ke-kanan, untuk menghasilkan efek hover dari bawah ke-atas, kalian cukup mengganti menjadi seperti :

#objek .ket {
margin-bottom:-300px;
}

dan

#objek:hover .ket {
margin-bottom:0px;
}

Semoga keterangan gambar ini bisa membantu pengunjung untuk lebih memahami artikel yang dimaksud dan bisa mempercantik tampilan blog terutama bagian post.

Semoga bermanfaat,

sumber : http://situseo.blogspot.com/

Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s