ADDING CSS HOVER EFFECT IN BLOGGER POST TITLE

I always think new things.Today a thought come in my mind that we can customize our blog post title with Css.I put the blog title in box and make it grow with transition effect.When you will mouse over blog title then it will grow and back color will change to white.You should at least try this effect in you blog and if you like this then please comment :D

Live Demo

To Add This Awesome Hover Effect To Your Blog Follow Below Steps-

• Go To Blogger Dashboard.
• Click on Template Tab.
• Now Click On Customize Button.
• Click On Advance Link.
• Now Scroll Down And Find Add Css And There Paste below Code And Save It.

.post-title
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
transition:width 3s;
width:500px;-moz-transition:width 3s; /* Firefox 4 */
-webkit-transition:width 3s; /* Safari and Chrome */
-o-transition:width 3s; /* Opera */
}
.post-title:hover
{
width:600px;background:#FAFAFA;
}

Customization-

If you want to increase width or decrease width then just edit the code I highlighted with red color.

Comment Please:)