Image Caption Cantik dengan CSS

Beberapa hari lalu saya sempat memperhatikan posting sahabat blogger tune-up mengenai hover image caption, dan sempat memperlajari tampilan menarik dengan ide yang cerdas akan widget tersebut. Terus terang saya tidak terpikir untuk membuat seperti itu. Tampilannya sederhana namun menyimpan keunikan tersendiri, nyaman dan menarik untuk dilihat. Salute untuk blogger tune-up dan posting ini saya dedikasikan untuk sahabat blogger tune-up semoga dengan artikel ini persahabatan antar sesama blogger akan terus hangat dan berlanjut sampai kapanpun. Amin.

Tutorial image caption mempergunakan CSS untuk mempermudah dan memperingan widget tersebut. Selanjutnya ditambahkan efek hover pada tampilan caption dengan warna hitam transparan untuk daya tarik tersendiri. Baiklah, langsung kita bahas cara membuat image caption cantik dengan css. Ikuti langkah berikut.

Log in ke blog
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut

<style type='text/css'>
Start Image Caption Css-->
#image-hover{}
#figure{position:relative; float:left; margin:10px; overflow:hidden; padding:1px}
#figure:hover{-moz-box-shadow:0 0 20px rgba(0,0,0,0.75); -webkit-box-shadow:0 0 20px rgba(0,0,0,0.75); box-shadow:0 0 20px rgba(0,0,0,0.75)}
#figure .caption{position:absolute; bottom:0; left:0; opacity:0.75; margin-bottom:-115px; -webkit-transition:margin-bottom; -webkit-transition-duration:400ms; -webkit-transition-timing-function:ease-out; -moz-transition-property:margin-bottom; -moz-transition-duration:400ms; -moz-transition-timing-function:ease-out; -o-transition-property:margin-bottom; -o-transition-duration:400ms; transition:margin-bottom; transition-duration:400ms; transition-timing-function:ease-out}
#figure:hover .caption{margin-bottom:0px}
#image-hover .caption{width:100%; height:90px; padding:10px; background:#111; color:#fff; font-family:Arial,Helvetica,sans-serif}
#image-hover .caption b{text-shadow:0px 2px 0px #000}
#image-hover .caption{color:#ddd; line-height:24px; font-size:14px; text-shadow:0px 2px 0px #000}
<!--End Image Caption Css -->
</style>

Klik Simpan Template
Selanjutnya, ketika anda ingin memberi efek hover pada gambar dalam artikel, masuk ke mode HTML, lalu tambahkan kode berikut.

<div id="image-hover">
<div id='figure'>
<img src="ISI DENGAN ALAMAT GAMBAR DI SINI"/>
<span class='caption'>
<b>JUDUL DI SINI</b>
MASUKKAN DESKRIPSI GAMBAR DI SINI
</span>
</div>
</div>

Silahkan edit sesuai petunjuk dan klik Terbitkan/ Publish. Demikian tutorial cara membuat image caption cantik dengan css, semoga bermanfaat. Amin. Selamat mencoba dan sukses selalu. Silahkan kunjungi blogger tune-up untuk image caption lainnya. Klik link berikut jQuery Animation - Hover Image Caption

"keep spirits and do the best"