HackingUniversity - Hacks . Tricks . How-To's

16 May 2015

Add Multi Colored Rainbow Effect on Blogger Images

I just love to customize my blogger template to extreme, either it's the header, body or footer everything needs to look just superb, recently you might have seen how fast I have made my template, well that due to less use JavaScript and other 3rd party elements, well today I will be telling you hot you can customize your blogger images and add multi colored rainbow effect that activates when someone hover's over your images, its really nice looking, I even posted this for the link, if you wanna check that out visit this post.

If you want to see the demo, check below. Just hover your mouse over the below image and see the colors changing automatically.

canberra_hero_image

Well we are achieving this effect using CSS, so lets see how to apply this to your very own blog and impress readers.

Adding Disco Style Effect to Blogger Images

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

    @-webkit-keyframes hue{100%{-webkit-filter:hue-rotate(360deg)}}img:hover{-webkit-animation:hue 1s linear infinite}

  3. If you are on Wordpress then just add above styles to your styles.CSS

That's it now save your template and refresh your blog to see this effect live, well this is working fine, but still if you face any problem do comment below.