11 November 2012

CSS Gambar Vintage

Tiada ulasan:
 
Snapshot:


Cara pemasangan

1. Log in ke dashboard--> layout- -> Edit HTML

2. Tekan "Ctrl+F" dan cari kod ]]></b:skin>

3. Sebelum ]]></b:skin> paste kod ni:

/* Vintage Image
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Change by right if you want the images to be aligned to the right */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* red */
background-image:url(http://lh4.googleusercontent.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0xs/s000/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

4.Save template.

5.Seterusnya,gunakan kod ini didalam pos jika mahu efek ini pada gambar pilihan

<div class="vintage">
<img border="0" src="URL imej" /></div>
<div style="clear: both;"/>


Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger