U KISS - Neverland Merupakan album kedua dari U KISS yang dirilis beberapa bulan lalu.

Menambahkan keterangan pada gambar itu membuat gambar menjadi menarik dipandang. Contohnya seperti disamping.

Copas kode berikut di atas ]]></b:skin>
#post-image {
}

#gambar {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}

#gambar: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);
}

#gambar .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;
}

#gambar:hover .caption {
margin-bottom:0px;
}

#post-image .caption {
width:100%;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}

#post-image .caption b {
text-shadow: 0px 2px 0px #000;
}
#post-image .caption {
color: #ddd;
line-height: 24px;
font-size: 14px;
text-shadow: 0px 2px 0px #000;
}
Klik Save.

Untuk percobaan, silahkan copas kode HTML berikut.
<div id="post-image">
 <div id='gambar'>
 <img src="http://www.gadgetsradar.info/uploadfiles/gadgetsradarinfo-1314740288/u-kiss-releases-teaser-for-2nd-album-quot-neverland-quot-_1.jpg"/>
 <span class='caption'>
 <b>U KISS - Neverland</b>
 Merupakan album kedua dari U KISS yang dirilis beberapa bulan lalu.
 </span>
 </div>
</div>

1 comment

19 Desember 2011 04.58

Nice info sob,, kunjungan balik,, http://ayriy.blogspot.com/2011/12/cara-membuat-efek-getar-pada-gambar-di.html

Posting Komentar

Konversi Kode
[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar