HackingUniversity - Hacks . Tricks . How-To's

26 August 2013

How to Add Awesome Image Saturation Effect in Blogger

Image Saturation effect simply de-saturates your image in the normal mode and as soon as you hover over that image you will colors coming back and the image is once again saturated. Well we are not using any kind of JavaScript or stuff to do this effect but we will use the simple CSS transitions and saturation effect to achieve this awesome effect on your blogger image's.

So now you might be thinking what the hell is saturation and what effect I am talking about, well to make you more clear we have just enabled that same effect on the below image, just try to hover above the below image and you will see colors coming back to the image, so basically this effect just makes the image Black and White and as soon as we hover over it the color's are back with a transition.

black-and-white-and-red-painted-girl

So now if you are clear about the effect we are talking about, lets see how you can apply this same effect to your blogger blog images, well applying this has two methods either you can add this effect to all the image by default or you can add this to separate images which ever you want o too.

Adding Saturation Effect on all Blogger Images

Well now if you are keen to add this effect to all your images you can check out the below steps that will help you out.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

    img{-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;-webkit-filter: saturate(0.0);-moz-filter:saturate(0.0)}img:hover{-webkit-filter: saturate(1.1);-moz-filter: saturate(1.1)}

  3. Now hit Save template, refresh your blog to see this effect working.

Adding Saturation Effect to Few Blogger Images

Well if you do not want to use this effect on all blogger images by default then below method could help you out in adding this effect to few images.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

    .saturate{-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;-webkit-filter: saturate(0.0);-moz-filter:saturate(0.0)}.saturate:hover{-webkit-filter: saturate(1.1);-moz-filter: saturate(1.1)}

  3. Now whenever you want to add this effect to any image, you just need to add class='saturate' to it, like below.

    <img class='saturate' alt="demo" src='http://xxxxxxxxxxxxxxxx.png' width="193" height="121">

  4. So as you can see your img code would look something like above just add the class like above and press publish, that's it your that image carry this effect.