Add Hover Effect to Your Header Image in Blogger

If you're a blogger then you might have seen these gorgeous header hover effect on many blogs and wonder "How do they do that". Don't worry, today we'll teach you how! This effect works on both header text and image. We've created this effect using some simple CSS transitions and it is entirely based on CSS. This effect works on mouseover, on moving you mouse cursor on header image, the image will move to right side with a beautiful transition and zoom effect. Before adding this effect to your blog, have a look on how it works. Click the demo button below:

Demo

How to Add Hover Effect to your Blogger Blog Header

First and foremost log in to your Blogger Account >> Select a Blog >> Template and Click Edit HTML button. Now click inside the template code area, use Ctrl+F to search and search for the following tag

]]></b:skin>

Now add the below code just above/before it (]]></b:skin> tag)

/*CSS Trick By http://www.blogolect.com Starts*/
#header-inner{
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
#header-inner:hover{
margin-left:50px;
-webkit-transform: scale(0.95,0.95);
-moz-transform: scale(0.95,0.95);
-o-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
}
/*CSS Trick By http://www.blogolect.com Ends*/

Click the Save Template button and you're done!
Congratulations: You've successfully add hover effect to your blogger blog header.
Note: To share this trick on your blog, please link back to us!

From Editors Desk

We hope that this may have helped you in learning How to Add Hover Effect to your Blogger Blog Header. If you want more cool CSS tricks then subscribe us and receive all updates directly in to your inbox. We'll code some more new CSS tricks in the upcoming days. Stay Tuned!

Share This:

Tags:

Blogger Tricks CSS Tricks

• Prevoius
• Next