You've got this little picture here and you want it to grow large, when hoovering over it:
Explanation
This is done with one image and only CSS code.
Advantage: Slim code, quickly done, only one image to download.
Disadvantage: You have to rely on the browser to shrink the large image into the small thumbnail. Quality is maybe not satisfying.
It's simple: In the html code is the normal <img> tag with the link going to the large picture. No height or width set in the html code.
CSS does that. The css code sets the height and width to the small thumbnail size. A second set of css code reacts on
the user hovering over the image and expands the size to the original image size (could be any size, not necessarily the actual image size).
Code:
The Styles:
img.blowitup{
height:70px;
width:100px;
}
img.blowitup:hover{
height:449px;
width:639px;
}
The XHTML part:
<img class="middlealign blowitup" src="Metallica-transparent.png" alt="small pic" />
Variation:
You've got this little picture here and you want it to grow large, when hoovering over it:
This is done with two image, again only CSS code.
Advantage: Slim code, quickly done, you can deside on the image quality yourself.
Disadvantage: A little bit more bandwidth, but we're talking about the additional small image!
Still rather simple: The HTML part consists only of a div. no <img> tag.
The css code sets height and width to the small thumbnail size. What also needs to be done
is set the background-image. A second set of css code reacts on
the user hovering over the image and expands the size to the larger image size, plus sets the larger image as
the background-image.
One thing, though: This way you might run into problems if you need the image to be inline, with text left and right. A div is a block element,
not an inline element. But I would say, in almost all cases it would be not working well anyway if you blow an inline element suddenly up.
But with some more code, it would be possible to catch that problem, too.
Code:
The Styles:
div.theimage{
height:70px;
width:100px;
background-image:url('Metallica-transparent-small.png');
}
div.theimage:hover{
height:449px;
width:639px;
background-image:url('Metallica-transparent.png');
}
The XHTML part:
<div class="theimage" />
Mainpage
