How to Make Image Hover Effects with jQuery

Author: | Posted in Tutorials, Web Design No comments
How to Make Image Hover Effect with jQuery

Reviewed by Filiz ÖZER on .

Best tutorial for Image Hover Effect! Thanks for this

Rating: 10 out of 10

We shared before an article about mouse hover effects. We shared in this article 10 amazing mouse hover effects that created with JQuery and CSS3. This article appreciated by most of our dear followers so we decided to create a special image hover effect today. In this tutorial, you will learn making 3 different image hover effects. This feature is usually can be seen on premium tutorials, but this article is free for dear Daily Design Notes followers.

You do not need to be a professional designer or code developer for use this simple feature. With a simple few steps, you can add this amazing effect into your designs. If you want to improve this design, we are always appreciate any comment and suggestions. Please share your comments and ideas with us.

image hover effect

[button href="http://dailydesignnotes.com/demos/image-hover-effect" target="_blank" size="medium" textcolor="#ffffff"]Live Preview[/button] [button href="http://dailydesignnotes.com/down/image-hover-effect.zip" size="medium" textcolor="#ffffff"]Download Now[/button]

Step #1 – add JS

At first step, we call latest JQuery link into our theme for make our effect to work. If you have a JQuery already in your design, skip this step.


Step #2 – call plugin

Next step, We add a plugin for our addon to work. With this JQuery plugin, we will put hover effects to the image under .image div. Add this code to the footer of your design.


	

Step #3 – add css

After first 2 steps, now it’s time to add CSS codes for our hover effect. Add CSS codes we give below to the style.css file or anywhere else you would like. You can find 3 image files into the .zip file that is needed for hover effect to work.

.hover-img {width:31.1%; margin:10px;float:left;}
.hover-img img {width:100%; display:block;}
span.link_post{ background-image:url(images/link_post_icon.png);}
span.zoom{ background-image:url(images/zoom_icon.png);}
span.play { background-image:url(images/video_icon.png);}
span.link_post,
span.zoom,
span.play{ overflow:hidden; display:block; width:35px; height:35px; cursor:pointer; background-color:#454545; background-repeat:no-repeat; background-position:center; }
.image a span { display:none; text-align:center; margin:0; text-decoration: none; z-index: 100; position: absolute; width: 100%;height: 100%;}
.image {display: block; position: relative; }

Step #4 – usage

Now it’s time to use this amazing effect. All you have to do is, write effect you want into the span tag. Example, you can use zoom, link_post or video tag for your videos.

	
		

That’s it.! This is end of our little tutorial. I hope you benefit from this simple example. Always suggestions and possible corrections are welcome. Please share your comments with us if you have any questions or say “thanks” :)

Our last article was about How to Make Amazing jQuery Style Switcher. We recommend you to read it also and please share this article on your social media profiles and also bookmark us.

Add Your Comment