Herr Bertling.

CSS Tutorial I: Hover effect on linked images

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. Anyway, I’d like to use the idea of css sprites. Here, I want to “trans­late” this tech­nique for using regular images instead of background-images. The reason to do this is simple: I don’t need one pic­ture for layout rea­sons, I need many pic­tures to behave in the same way — chan­ging color & border 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 already con­tains the states I need: On the left side a b/w-picture with a green border, on the right side the colored one with a yellow 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­mented 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: hidden;” causes 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 important 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 border with “border: 0;”.

Finally, the real “action” is done with editing the a:hover state.

Simply add a nega­tive left margin to the pic­ture. This margin again matches 50% of the images width. In this way, the image gets pushed to the left, revea­ling the colored right side.

Result:

• minimal 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­nique is app­re­ciated. If you like this tuto­rial, let me know!

(There might be tuto­rials about this tech­nique in other places. I couldn’t find any in a quick google search This should at least work with FireFox 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.)

Tutorial: CSS — Hover mit verlinkten Bildern

Hover-Effekte mit einem Hintergrund-Bild lassen sich ein­fach finden. Aller­dings brauche ich für meine Anwen­dung kein Hintergrund-Bild, son­dern ein ein­fa­ches, ein­ge­bun­denes Bild, da ich nicht für jedes Mit­glied ein eigenes Hintergrund-Bild (inklu­sive eigener #id etc.) anlegen möchte.Was tun? Zuerst einmal der HTML-Code:

<div class="memberarea">

<a href="#">

<img title="Mr. X" src=”das_bild.jpg” alt=”Mr. X" />

</a>

</div>

Wie man sieht, ist das Bild im Link ent­halten, der Link in einem umge­benden div. Das ein­ge­bun­dene Bild ent­hält bereits die beiden gewünschten Zustände . Ohne CSS sähe das Ergebnis noch recht trostlos aus.

Kommen wir also zum CSS-Teil:

div.memberarea {
width: 210px;
height: 200px;
overflow: hidden;
}
div.memberarea a {
text-decoration: none;
display: block;
width: 420px;
}
div.memberarea a img {
border: 0;
}
div.memberarea a:hover {
margin-left: -210px;
}

Zuerst wird dem umge­benden div eine feste Weite (die Hälfte der Bild-Breite) sowie eine feste Höhe zuge­wiesen (die Höhe des Bildes). Die Angabe over­flow: hidden bewirkt, dass nur die linke Bild-Hälfte ange­zeigt wird.

Nun wird das Link-Element bear­beitet: Das Unter­strei­chen des Links wird unter­bunden und ganz wichtig: Der Link wird zum Block-Element gemacht. Diesem Block-Element kann ich dann eine ent­spre­chende (näm­lich die Bild-) Breite geben.

Dem Bild-Element wird der Rahmen genommen, sieht nun mal schöner aus & ver­hin­dert kleine Pixel-Fehler, die durch einen Rahmen ent­stehen könnten.

Die eigent­liche Hover-Action findet im letzten Teil statt: Durch die nega­tive Ver­schie­bung des Links (der sich als Block-Element ver­schieben lässt) erscheint nun im div der rechte Teil des Bildes. Fertig.

(Viel­leicht gibt es ein ähn­li­ches Tuto­rial schon irgendwo, ich konnte aller­dings auf die Schnelle keins finden. Browser-Kompatibilität wurde ebenso nicht getestet, mit FireFox sowie Safari & Mac OS X funk­tio­nierts. Windows-Browser kann ich leider gerade nicht testen Was macht der IE? )