Add Hover Effect to Images of your Blogger Blog Posts

Today I'm going to share an easy and amazing Blogger trick. You may have seen Image hover effect on many blogs. The hover effect I'm going to share with you today will glow the images of your Blogger Blog posts. When you move your mouse over an image it will Glow the image in red color (You can also change the color by replacing the hex color codes). So, guys follow the steps below to add this Image Hover effect to your blog.

Add Hover Effect to Images of your Blogger Blog Posts 

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

]]></b:skin>

Step 3. Copy the Below code and Paste it just above/before the ]]></b:skin> tag

.post img {
padding: 8px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post img:hover {
background:#FDFDFB;
border:1px solid #FF3300;
-moz-box-shadow:0 0 10px 2px #FF0000;
-webkit-box-shadow:0 0 10px 4px #FF0000;
box-shadow:0 0 10px 4px #FF0000;
}

Step 4. Click on Save Template button
That's it!!!

From Editors Desk

I hope that you will like this image hover effect, Give us your Feedback and Enjoy Blogging !
Feel Free to Ask. Your Feedback is always highly appreciated

Share This:

Tags:

Blog Design Blogging Tips

• Prevoius
• Next