How To Add A Vintage Style To Images In Blogger Using CSS

Vintage Instagram effect for your pictures to be posted to your blog is now of no worry. We can use CSS and get a similar result! We will apply a shadow effect inside the image, add  some borders,  putting a color in it, and on top of our image. And finally we will add another semitransparent image with a classic style that will give a vintage touch. You can see the example in this picture below, upon pointing the cursor to the image, a change will happen from normal  photo but it is now more elegant to see.

Let us now start the ball rolling on "How To Add A Vintage Style To Images In Blogger Using CSS"

Go to Blogger Dashboard >> Template >> Edit HTML
Select the "Expand widget template" box (Escape this step)
Search the code below:

]]></b:skin>

Just above it, add the following CSS code:

/* Vintage Images
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
position: relative;
float: left; /* Change to 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,102,0, 0.6); /* sepia */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr0W1Eu_NRkrNYkl5lJPgrU59ViRz6C67Wc6RpT-HXTqXBxPuR6JOhl4jZLufY12kvXd_YYUntEoZBdSGwTuwaLXCWKfqeo5n12cHNmffk61UnG_yojnF7BQqDi7Au9H4qQ35_-0IV8sw/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;
}

Note:
1. You can change the location of the photo by changing  the bold red line in the above codes.
2. In the code above also , you see a bold blue line that corresponds to the color of the image, you can change it to any other color, these are some examples of traditional vintage:

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 */

If you want the image to not change to its original state on mouse hover, then remove the last code:

.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

After you've made your changes, click on Save Template.

Finally, add this code inside your posts each time you want to apply the vintage effect to an image
 (of course you must have to switch the blogger editor tab  to HTML Mode,  if you want to use this code inside your post).

<div class="vintage">
<img border="0" src="URL of your image here" /></div>
<div style="clear: both;"/>

Replace the text URL of your image here with your own photo URL.
Also check this post ( How to upload image in Blogger and get the URL on it).
And that's it, hope you Enjoy!
Credits goes to Helplogger

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook