CSS Gambar Vintage
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:
4.Save template.
5.Seterusnya,gunakan kod ini didalam pos jika mahu efek ini pada gambar pilihan
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-3WDw5ROof_kCA2AqzJQTQRa0ATmJUaM3_7ZAhgbunTmJIH9efm1OKoWjoPZ38cglEeN0R0lTr9jB06uQ9a9ZQt0tLkWaUv3u_8_OijKyC8-8aZS_N3wiTeAnMHtPYoL9nQtOtl-05c/s0/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;
}
----------------------------------------------- */
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw-3WDw5ROof_kCA2AqzJQTQRa0ATmJUaM3_7ZAhgbunTmJIH9efm1OKoWjoPZ38cglEeN0R0lTr9jB06uQ9a9ZQt0tLkWaUv3u_8_OijKyC8-8aZS_N3wiTeAnMHtPYoL9nQtOtl-05c/s0/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;"/>
<img border="0" src="URL imej" /></div>
<div style="clear: both;"/>
Post a Comment:
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.