Add a Vintage Style to Images

Pasti keren jika trick hover dipadukan dengan berbagai elemen CSS3 untuk memperindah tampilan gambar pada area postingan. Berbicara mengenai image trick dipikir-pikir tidak ada habisnya ;)) Seperti artikel lawas gue satu ini make tint effect for image! Ketika itu penggunaan background dan warna rgba yang membuat gambar tampak berefek warna-warni transparan gimana gitoH :d Nah, sekarang bagaimana jadinya jika trik lawas itu kita perbaharui dengan menambahkan properti background-size dan box shadow
Mari kita mulai cara membuat efek vintage style pada image menggunakan property CSS.

.vintage {
 position: relative;
 float: left;
}
.vintage:before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-size: 100% 100%;
 background-color: rgba(255,102,0, 0.6); /* sepia */
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBna9ZC2Ug9EhAKZ02Oed5hGuPwUOCj8NnbxOmGnWx0o6Se4uZa65zUTPEiSZb6Fxd3usSnWRtJoBopQUsa_G4YszsZ1f_hyphenhyphenIHcKapNIIed3BCVlzKvVdAOm0GSocizwfeQlj9Oj7C68E/s1600/grunge.png);
 box-shadow: inset 0 0 55px #000, inset 0 0 55px #000, inset 0 0 55px #000;
 -webkit-transition: all 1s;
 -o-transition: all 1s;
 transition: all .1s;
}
.vintage:hover:before {
 background: none;
 box-shadow: none;
}

Syntax HTML<div class="vintage">
<img src="YOUR IMAGE HERE" />
</div>

Opsional
Macam-macam background-color bisa diganti dengan:

background-color: rgba(0,0,255,0.5); /* blue */
background-color: rgba(0,255,0,0.5); /* green */
background-color: rgba(0,255,255,0.5); /* cyan */
background-color: rgba(255,0,0,0.5); /* red */
background-color: rgba(255,0,240,0.5); /* violet */
Resource by: http://helplogger.blogspot.com
Happy coding \m/