Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Fade on mouse hover effect

Monday, March 19th, 2012 by Servage

Fade on mouse hover is probably one of the most popular effects on websites. It can be accomplished in various ways, one of which is via JavaScript.

Fading effects are particularly usefull for images/videos where you want it to display a little less prominent until the user actively hovers the mouse over an element.

Fading on hover effects are also good to indicate that an element is clickable, like chaning the color or adding an underline for text links.

The following snippet demonstrates how you can create such a hover effect on mouse over/out events with jQuery:

  $(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads

  $(".thumbs img").hover(function(){
    $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    $(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
Fade on mouse hover effect, 4.0 out of 5 based on 4 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.