• CSS Tutorial I: Hover effect on linked images

    0
    Mag ich! Mag ich! (1)
    23.03.08 Markus webdesign

    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.)

    scissors

  • Tutorial: CSS — Hover mit verlinkten Bildern

    0
    Mag ich! Mag ich! (2)
    21.03.08 Markus webdesign

    Hover-Effekte mit einem Hintergrund-Bild las­sen sich ein­fach fin­den. Aller­dings brau­che ich für meine Anwen­dung kein Hintergrund-Bild, son­dern ein ein­fa­ches, ein­ge­bun­de­nes Bild, da ich nicht für jedes Mit­glied ein eige­nes Hintergrund-Bild (inklu­sive eige­ner #id etc.) anle­gen möchte.Was tun? Zuerst ein­mal der HTML-Code:

    <div id="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­hal­ten, der Link in einem umge­ben­den div. Das ein­ge­bun­dene Bild ent­hält bereits die bei­den gewünsch­ten Zustände . Ohne CSS sähe das Ergeb­nis noch recht trost­los aus.

    Kom­men 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­ben­den div eine feste Weite (die Hälfte der Bild-Breite) sowie eine feste Höhe zuge­wie­sen (die Höhe des Bil­des). Die Angabe over­flow: hid­den bewirkt, dass nur die linke Bild-Hälfte ange­zeigt wird.

    Nun wird das Link-Element bear­bei­tet: Das Unter­strei­chen des Links wird unter­bun­den und ganz wich­tig: Der Link wird zum Block-Element gemacht. Die­sem Block-Element kann ich dann eine ent­spre­chende (näm­lich die Bild-) Breite geben.

    Dem Bild-Element wird der Rah­men genom­men, sieht nun mal schö­ner aus & ver­hin­dert kleine Pixel-Fehler, die durch einen Rah­men ent­ste­hen könnten.

    Die eigent­li­che Hover-Action fin­det im letz­ten Teil statt: Durch die nega­tive Ver­schie­bung des Links (der sich als Block-Element ver­schie­ben lässt) erscheint nun im div der rechte Teil des Bil­des. Fertig.

    (Viel­leicht gibt es ein ähnli­ches Tuto­rial schon irgendwo, ich konnte aller­dings auf die Schnelle keins fin­den. Browser-Kompatibilität wurde ebenso nicht getes­tet, mit Fire­Fox sowie Safari & Mac OS X funk­tio­nierts. Windows-Browser kann ich lei­der gerade nicht tes­ten ;-) Was macht der IE? )

    scissors
    • Seite 1 von 11