Digital Development
Web Design

Changing how an element is displayed in the browser on hover events is a basic part of CSS these days. One of the more creative uses of this effect is its application to block elements, e.g. divs or images, allowing for nice effects such as a change in opacity or the appearance of some heading text on hover events. One of the slightly annoying things with hover events is that they can be triggered quite easily, and often unintentionally as the user moves the mouse about the page, so I've also provided a quick example of using hoverIntent, a lightweight jQuery plugin which helps to avoid excessive hover event triggering. The HTML code Start off with some simple HTML code. The main idea behind this approach is the inclusion of an empty div inside your parent container which will later be styled and manipulated with jQuery for the hover effect.

Styling the Overlay Effect

We'll now give some body to the empty 'overbox' div which will give us the effect of a having a shaded cover over our image. Note how this div must be absolutely positioned within its parent.

.item2 { 
    width: 150px; 
    height: 150px;
    position: relative;
}
.item img { 
    width: 100%;
}
.overbox {
    background: #62C7CB; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0;
}

Using jQuery .hover()

Finally a bit of magic from jQuery. Using the hover() function we can manipulate the visibility of the 'overbox' using the fadeOut and fadeIn effects. The hover() function takes two event handlers, the first to be executed upon mouseOn and the second to be executed upon mouseOff. The following code includes a nice 500ms duration setting for smoothness!

$('.item').hover(
    function(){ 
        $(this).find('.overbox').fadeOut(500);
    },
    function(){ 
        $(this).find('.overbox').css('filter', 'alpha(opacity=80)').fadeIn(500); 
    } 
);

Hover Intent

Here's some extra magic if you're playing with hover effects. There's a lightweight jQuery plugin called hoverIntent which helps to avoid your hover events triggering when not intended by the user. Basically, the plugin measures the time spent on the element and only triggers the event if the mouse is moving below a threshold speed...pretty clever. The sensitivity can be configured to customize it to your liking. Taking the images opening this post as an example, if you move your mouse quickly between the two you'll see how they responds differently to the hover event...nice!