The 5 Best Animated Image Hover Effects For Blogs




| 2 comments

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)

]]></b:skin>

2. Copy And Paste This Code Directly Before/Above ]]></b:skin>

.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 :

<img class="effect1" border="0" height="240" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TLDIDdIHmgI/AAAAAAAABrg/XqNRHvp5OZw/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)

]]></b:skin>

2. Copy And Paste This Code Directly Before/Above ]]></b:skin>

.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 :

<img class="effect2" border="0" height="240" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TLDIDdIHmgI/AAAAAAAABrg/XqNRHvp5OZw/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)

]]></b:skin>

2. Copy And Paste This Code Directly Before/Above ]]></b:skin>

.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 :

<img class="effect3" border="0" height="240" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TLDIDdIHmgI/AAAAAAAABrg/XqNRHvp5OZw/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.

DemoPlace 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 !


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

2 comments:

  1. Great tutorial buddy. But it seems 1st, 2nd ,3rd and 5th are nt worling while using google chrome. 4th one works perfectly.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us