Resize images using :hover

CSS Coding Tutorials | Submited Feb 16, 2008

Written by:

<tutorial>

HTML

<div class="imgBox">
<a href="#"><img src="http://j6.bz/5im.jpg" class="hoverIMG" /></a>
</div>

<div class="imgBox">
That creates a DIV box named imgBox, it holds the image.

<a href="#">
I added the <a> tag so that the :hover pseudo element works as it should in all browsers. when the href is set to "#" or "/" it does nothing, it's just an inactive clickable thing.

<img src="http://j6.bz/5im.jpg" class="hoverIMG" />
That adds the image, and to be specific I added a class name to it (hoverIMG) in case you wanted to do this different ways with different pictures.

The rest are closing tags for the link and the DIV.

CSS

[Style Tags]

.imgBox{overflow:hidden; width:100px; height:100px;}
.imgBox a img.hoverIMG{width:100px;}
.imgBox a:hover img.hoverIMG{width:auto; position:absolute;}

Now to explain:
.imgBox{overflow:hidden; width:100px; height:100px;}
That makes the DIV box containing the image a 100px square, and anything in the box that exceeds it will be hidden.

.imgBox a img.hoverIMG{width:100px;}
That scales the image so that it's 100px in width, however, it still gets cut off a bit inside the DIV box height wise.

.imgBox a:hover img.hoverIMG{width:auto; position:absolute;}
Since I added :hover to the A element, it only affects when the mouse hovers over the link/image.
width:auto; means that when you hover it it'll go to it's original size.
position:absolute; brings it outside of the box so you can see the full image.

</tutorial>