Insane jQuery Image Rollover

Afternoon all,

Today I thought I’d demonstrate an awesome little jQuery technique that has gained a lot of popularity over the last year or so. We’ll essentially be getting a block hyperlink to fade in gracefully over an image. By using a block hyperlink, span tags, padding, and some other basic CSS, we can create a really nice looking rollover state.

With the rollover state using real text, you can easily make these image hyperlinks fully dynamic. For example, if being used on a WordPress site, the image could be the featured image of a blog post, while the text in the rollover could be the blog post title. Very useful.

The HTML

So, the HTML markup is a little longer than a standard hyperlinked image. See below!

<div class="wrapper">
<img src="hamster.jpg" alt="Hamster on Swing" />
<a href="#" title="Click for More" class="description">
<img src="search.png" alt="Search" />Want to read more?
</a>
</div>

The surrounding wrapper div is used to position the image, position the “description” hyperlink that is faded in, and add any styling if you wish.

The first image is the main image that you want to hyperlink.

Following that is the hyperlink that we fade in using jQuery. Inside the hyperlink, I’ve included some text alongside a cheeky little icon image. If you want multiple styles or lines of text inside a hyperlink, you should use span tags. Being block elements, you can’t use paragraph tags as they won’t validate!

The jQuery

Next I’ll show the jQuery being used to create the fading hover effect.

<script type="text/javascript">
$(document).ready(function(){
        $('.wrapper').hover(function(){
                $(this).children('.description').stop().fadeTo(200, 0.8);
        },function(){
                $(this).children('.description').stop().fadeTo(200, 0);
        });
});
</script>

It’s a very simple piece of Javascript. The first function is telling the hyperlink with the “description” class to fade to 80% opactity, with a 2 second ease, when the “wrapper” div is hovered over. The second function then slowly fades the hyperlink away when the user stops hovering. Lightweight, but it creates a very cool effect!

The CSS

Finally, here’s the stylesheet being used…

.wrapper                        { padding: 8px; background-color: #fff; border: 1px #0d5a2c solid; position: relative; width: 250px; height: 250px; margin: 0 auto; }
.wrapper:hover          { cursor: pointer; }
.description            { display: none; background-color: #000; color: #fff; position: absolute; left: 8px; top: 8px;  font-family: 'Kreon', arial, serif; text-decoration: none; font-size: 1.5em; width: 250px; height: 130px; padding: 120px 0 0 0; }
.description img        { vertical-align: middle; margin: 0 2px 1px 0; }

I’ve included some padding and a border to the wrapper div. I feel this makes the image look that little bit nicer. The 0 auto margin was simply to center the image on the demo page! The relative positioning is a necessity, while the width and height is also needed if you decide to use padding like me.

The styling for the hyperlink is also very simple. First I added a “display: none”, which is overided by the jQuery upon hover. Absolute positioning is needed, and I’ve also added some left and top positioning so the link doesn’t appear over the padded area. Because of the padding, I’ve again had to set a height and width, and added padding to position the text.

Feel free to edit the CSS to create your own look! If you need any help getting the rollovers working, feel free to leave a question in the comments section below.