bertdesign.de

The pro­blem:

I want to add a hover effect to some images. These images aren’t back­ground images, they are images of dif­fe­rent people. Any­way, I’d like to use the idea of css spri­tes. Here, I want to “trans­late” this tech­ni­que for using regu­lar images instead of background-images. The rea­son to do this is sim­ple: I don’t need one pic­ture for lay­out rea­sons, I need many pic­tures to behave in the same way — chan­ging color & bor­der in a cer­tain way. By the way, the images will be links, too

So let’s get started:

The HTML code:

<div>
<a href="#">
<img title="”Mr. X" src="”the_image.jpg" alt="”Mr. X" />
</a>
</div>

There are three main ele­ments included:

• A div with the class “member”
• The link
• The image itself

As you can see, the link con­tains the image, the div con­tains these two. The image alre­ady con­tains the sta­tes I need: On the left side a b/w-picture with a green bor­der, on the right side the colo­red one with a yel­low square added.

Pretty boring wit­hout CSS if you ask me. Let’s move on to the CSS-part:

Atten­tion: The dif­fe­rent px values are matching the pixel size of the image, as com­men­ted in the CSS file. You have to fit these to your needs.

div.member {
width: 210px; /* 50% of image width */
height: 200px; /* image height */
overflow: hidden;
}
div.member a {
text-decoration: none;
display: block;
width: 420px; /* 100% image width */
}
div.member a img {
border: 0;
}
div.member a:hover {
margin-left: -210px; /* as above, 50% of image width. Watch out: negative value! */
}

At first, the sur­roun­ding div gets a fixed width, which is exactly 50% of the images width. The height matches the image height.

Set­ting “over­flow: hid­den;” cau­ses only the left side of the image to appear.

Now, the link-element is styled. “text-decoration: none;” prevents the under­line (as you might know…). Far more import­ant is the next step: The link ele­ment turns into a block-element with “dis­play: block;”. Now you can add a fixed width to this ele­ment. As you see, the width is exactly the image width.

To prevent little pixel errors, the img ele­ment gets rid of the bor­der with “bor­der: 0;”.

Finally, the real “action” is done with edit­ing the a:hover state.

Sim­ply add a nega­tive left mar­gin to the pic­ture. This mar­gin again matches 50% of the images width. In this way, the image gets pus­hed to the left, revea­ling the colo­red right side.

Result:

• mini­mal usage of CSS & extra markup
• nice hover effect
• should work in most brow­sers (please com­ment if you find errors!)

Any com­ment on this tech­ni­que is app­re­cia­ted. If you like this tuto­rial, let me know!

(There might be tuto­ri­als about this tech­ni­que in other pla­ces. I couldn’t find any in a quick google search This should at least work with Fire­Fox and Safari on a Mac, that’s what I was able to test. IE seems to work too, accor­ding to some fri­ends tes­ting it.)

Ähnliche Artikel

• Tutorial: CSS — Hover mit verlinkten Bildern
• Wordpress: Performance optimieren
• Wie man CSS3 und HTML5 schon nutzen kann