The 5 Best Animated Image Hover Effects For Blogs

We all like to spice up the images we use on our blogs.In fact the previous posts we have published on using hover effects, fade effects and border effects have been some of the most popular.So i decided it was time to show you a new Image effect and while i was messing around with the code i thought why not show more than one tutorial...Five to be exact.The 5 Image Hover Effects in this post are REALLY EASY and each can be added to selected images on your blog.In fact you could use all five on different pictures on your blog.

Included in the list of hover effects are border effects, opacity effects and turning one image into another when the cursor is hovered over it.

5 Hover Image Effects For Pictures And Images

Image Hover Effect 1

The first hover effect adds a thick border to the image, you can change the color of the border.

Demo - Place Your Cursor Over The Image :



Instructions

1. In your dashboard click 'Layout' > 'Edit html' > Find The Following Piece Of Code :
(Click Ctrl and F for a search bar to help find the code - More Info On Search Bar)

]]>

2. Copy And Paste This Code Directly Before/Above ]]>

.effect1 {
padding:6px;
border:1px solid #999;
}
.effect1:hover {
padding:6px;
background-color:#999;
}

Note - You can change the colors used in the effect by switching the hex numbers in the code.Get the codes here - Html Color Code Chart

3. Save Your Template

4. Add "effect1" to the images you want to have the effect as shown below :

class="effect1" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZ0pt4Y58ghCrPiILiLhLZU8On6e2hGuBLRsUluy941hotfW6KYQC9cSk8KY7VPBYVUNptkvLotwPM0XbVFoeCxvBje65rd4KWTW9QYpJGFZ76_g2qdylk1G4PPjxf2SExoAjGsCMt0Qz/s320/blog+guys.JPG" width="320" />

Note: The code above is for an image uploaded to Blogger but the effect works with all images.

Image Hover Effect 2

This hover effect adds a second wider border inside the original both border colors can be changed.

Demo - Place Your Cursor Over The Image :



Instructions

1. In your dashboard click 'Layout' > 'Edit html' > Find The Following Piece Of Code :
(Click Ctrl and F for a search bar to help find the code - More Info On Search Bar)

]]>

2. Copy And Paste This Code Directly Before/Above ]]>

.effect2 {
padding:5px;
border:1px solid #999;
}
.effect2:hover {
padding:5px;
background-color:#ff3300;
border:3px solid #999;
}

Note - You can change the colors used in the effect by switching the hex numbers in the code.Get the codes here - Html Color Code Chart

3. Save Your Template

4. Add "effect1" to the images you want to have the effect as shown below :

class="effect2" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZ0pt4Y58ghCrPiILiLhLZU8On6e2hGuBLRsUluy941hotfW6KYQC9cSk8KY7VPBYVUNptkvLotwPM0XbVFoeCxvBje65rd4KWTW9QYpJGFZ76_g2qdylk1G4PPjxf2SExoAjGsCMt0Qz/s320/blog+guys.JPG" width="320" />

Note: The code above is for an image uploaded to Blogger but the effect works with all images.



Image Hover Effect 3

This hover effect changes the original solid border into a dashed border with a different color, both border colors can be changed.

Demo - Place Your Cursor Over The Image :



Instructions

1. In your dashboard click 'Layout' > 'Edit html' > Find The Following Piece Of Code :
(Click Ctrl and F for a search bar to help find the code - More Info On Search Bar)

]]>

2. Copy And Paste This Code Directly Before/Above ]]>

.effect3 {
padding:5px;
border:1px solid #999;
}
.effect3:hover {
padding:5px;
background-color:#fff;
border:1px dashed #ff3300;
}

Note - You can change the colors used in the effect by switching the hex numbers in the code.Get the codes here - Html Color Code Chart

3. Save Your Template

4. Add "effect3" to the images you want to have the effect as shown below :

class="effect3" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSZ0pt4Y58ghCrPiILiLhLZU8On6e2hGuBLRsUluy941hotfW6KYQC9cSk8KY7VPBYVUNptkvLotwPM0XbVFoeCxvBje65rd4KWTW9QYpJGFZ76_g2qdylk1G4PPjxf2SExoAjGsCMt0Qz/s320/blog+guys.JPG" width="320" />

Note: The code above is for an image uploaded to Blogger but the effect works with all images.

Image Hover Effect 4

The effect in this hover effect can be simple or extreme.When you hover over the image it changes to a totally different image.The bigger the size difference between the images the more extreme the effect.

Demo - Place Your Cursor Over The Image :



The tutorial for this image effect can be found in this post - Make a rollover mouse over image

Image Hover Effect 5

The hover effect here is one of the most commonly used called opacity effect.The image is blurred until you hover over it than it becomes clear.

Demo - Place Your Cursor Over The Image :



The tutorial for this image effect can be found in this post - Opacity Hover Effect Image

That's it with these image effects you can add some spice to the pictures on your blog.Remember you can use them with images in posts and on your template.

Let us know which effect you like the best !