Want to add amazing hover effect on your blog's header image, then here is a short and simple guide to do so. This CSS based method will work on both image and text header for your blog.
Log in to Blogger.com then select Template
Then click on Edit HTML.
Click anywhere at the code area and press CTRL+F to open search box.
Search for " ]]></b:skin> "
Now add this code -
#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:0px;
-webkit-transform: scale(0.88,0.88);
-moz-transform: scale(0.88,0.88);
-o-transform: scale(0.88,0.88);
-ms-transform: scale(0.88,0.88);
transform: scale(0.88,0.88);
-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;
}
just above it as shown in above image.
Click on Save Template
#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:0px;
-webkit-transform: scale(0.88,0.88);
-moz-transform: scale(0.88,0.88);
-o-transform: scale(0.88,0.88);
-ms-transform: scale(0.88,0.88);
transform: scale(0.88,0.88);
-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;
}
just above it as shown in above image.
Click on Save Template