CSS Memasang Caption di Image

CSS Memasang Caption di Image - Triks CSS berikut ini mungkin sudah banyak yang ngerti, karena saya dapat dari googling tapi dari blogger luar sana. Membuat Caption pada Image akan mempercantik tampilan posting kita. Ada banyak cara memberi caption pada image, mungkin ini akan membuat beda. silahkan langsung dicoba saja, karena saya belum bisa memberi banyak pengertian, karena masih dipelajari haa. 

Berikut ini scriptnya yang langsung bisa kamu coba sendiri :
Setelah masuk blog anda, silahkan copy script CSS di atas ]]></b:skin>

Script CSS :

ul { overflow: hidden; padding: 5px; }
ul > li {
position: relative;
float: left;
list-style: none;
margin: 0 20px 20px 0;
font-size: 10px;
}
ul a { text-decoration: none; display: block; }
ul li img { display: block; position: relative; z-index: -1; } /* IE8 fix */
ul li:not([class=na]) img { position: static; }
ul a:hover, ul a:focus { display: block; outline: none; -moz-box-shadow: 3px 3px 5px #000; -webkit-box-shadow: 3px 3px 5px #000; box-shadow: 3px 3px 5px #000; }
ul a:hover img, ul a:focus img { outline: 3px solid #ccc; }

ul a:hover:after,
ul a:focus:after
{
content: attr(title);
color: #000;
position: absolute;
bottom: 0;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
width: 100%;
background: rgb(255,255,255);
background: rgba(255,255,255,0.7);
background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.7)), to(rgba(204,204,204,0.7))); /* Safari */
display: block;
text-shadow: 1px 1px 1px #fff;
}
ul a.reverse:hover:after,
ul a.reverse:focus:after { top: 0; right: 0; }

ul a.offset:hover:after,
ul a.offset:focus:after { top: 50%; margin-top: -15px; }

ul a.alternate01:hover:after,
ul a.alternate01:focus:after
{
top: 0;
width: 50%;
height: 100%;
line-height: normal;
text-align: left;
padding: 4px;
font-size: 12px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Con color */
ul.color a:hover img, ul.color a:focus img { outline-color: #1E528C; }

ul.color a:hover:after,
ul.color a:focus:after
{
background: rgb(30,82,140);
background: rgba(30, 82, 140, 0.7);
background: -moz-linear-gradient(top, rgba(30, 82, 140, 0.7), rgba(43, 117, 200, 0.7)); /* Firefox 3.6+ */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30, 82, 140, 0.7)), to(rgba(43, 117, 200, 0.7))); /* Safari */
color: #fff;
text-shadow: 1px 1px 1px #000;
}

HTML Versi 1

<ul>
<li><a href="url-article" class="offset" title="Títle"><img src="url-image" width="559" height="283" alt="Títle" /></a></li>
</ul>

HTML Versi 2

<ul class="color">
<li><a href="url-article" class="offset" title="Títle"><img src="url-image" width="559" height="283" alt="Títle" /></a></li>
</ul>

Untuk Demo atau Contohnya klik link dibawah ini :

Selesai silahkan anda buka blogmu dan apakah berhasil..???