How To Add Together A Vintage Manner To Images Inwards Blogger Using Css

To instruct that vintage Instagram outcome on your pictures, you lot don't convey to role a program, instantly you lot tin role CSS too instruct a similar result! The next play a joke on volition apply a shadow within the image, add together a dorsum border, too on transcend of the image, add together about other semitransparent epitome amongst a grunge means that volition plough over a vintage touch.

You tin come across a demonstrate on the attempt out weblog - deed the cursor over the epitome too it changes dorsum to normal (notice that borders rest the same):

Demo: Instagram-like Vintage Effect for Images

Obviously, at that spot volition last images that volition check meliorate these effects than others, but regardless of that nosotros do, at that spot should last made a few observations:
- this outcome is made amongst CSS too it volition non recognize about browsers, peculiarly Internet Explorer. So this outcome mightiness non operate on older versions of IE.
- the images are non centered, you lot volition convey to align them to the left (default) or to the right.

Now let's add together the CSS code for applying this vintage Instagram outcome on our images.

Adding Instagram-like Vintage Effect to Blogger Images

Step 1. From your Blogger dashboard > instruct to "Template" > "Edit HTML"

Step 2. Click anywhere within the code expanse too press the CTRL + F keys to opened upwardly Blogger' search box

Step 3. Type or glue the next tag within the search box:

</head>

Step 4. Just higher upwardly </head> add together the next CSS style:

<style>
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px venture #000;
position: relative;
float: left; /* Change to correct if you lot desire the images to last aligned to the correct */
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/AVvXsEiSGQFXfAVH_hVOJVkb9QvpUWyP2deVxSbFIxhHZ5dFMMTIxvOuPjBOyv0L28ltb6hkJMGZVA8uNWYJVe1zv26QewLmSMT5pDd1iwf0zhY3siMkAKb6ovHAL3u6TxAAnjjGoYGAcq3D-Qs/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;
}
</style>

Note: The trouble inwards bold that corresponds to the color of the image, tin last changed to whatever other color; hither are about examples of traditional vintage:

background-color: rgba(0,0,255, 0.5); /* bluish */
background-color: rgba(0,255,0, 0.5); /* light-green */
background-color: rgba(0,255,255, 0.5); /* cyan */
background-color: rgba(255,0,0, 0.5); /* ruddy */
background-color: rgba(255,0,240, 0.5); /* purple */

If you lot desire the epitome non to alter to its master terra firma on mouse hover, too hence take away the final code:

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

Step 5. Click the "Save Template" push to relieve the style.

Step 6. Finally, add together the next HTML code within the HTML department of your posts each fourth dimension you lot desire to apply the vintage outcome to an image:

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

Replace the text inwards bluish amongst the url of your picture.

And that's it, amongst this lilliputian experiment you lot tin convey your vintage-style images using CSS only.