I have been looking for ways and means to resize images on mouse over. The reason? If you look at this post, you will notice that the numbers of interest are not visible at all on the image at the current resolution. However if the images are displayed at full-size, it overflows the container and makes the entire page look quite ugly.
I found quite a few solutions, however none served my purpose, since almost all of them used javascript and that broke my XHTML compliance. So I wrote this fully css hack. It resizes the image on hover. The code as such is VERY simple. I just defined a class called img_resize.
.img_resize{
width:50%;
}
.img_resize:hover{
width: 200%;
}
That’s about it. I just use this class, when I define my image tags,. Works in all browsers but (guess which one) yeah IE. Well, I don’t care too much about that. If you are an IE user and want to see these images the right size, well you can open them in a new window, or even better move to a decent browser.
EDIT: Anil pointed out that the css would work much better if I changed the settings for the hover image to auto. I agree, so I guess the updated css should be
.img_resize:hover{
width: auto;
}
Here normally the image takes the width specified in the img tag. On hover, the image is shown at the true size, which is the desired behavior
EDIT 2:
Well I got this fixed for IE too. But I hate the fact that I need to put in hacks for a browser. Imagine the amount of pain guys at google or any other web based company need to go through to make sure their stuff works with all the stupid browser quirks. Anyway the hack is based on the post by Peter Nederlof. For detaiils please visit the link. I shall not pretend to know how the hack works. Anyway all you need to do is download this htc file and put it somewhere where your page can access it. Now add these lines in the header of your html
<!–[if IE]>
<style type=”text/css” media=”screen”>
body{behavior:url(https://ierr.dev/Media/Data/csshover.htc);
}
</style>
<![endif]–>
If you have a doubt, have a look at the source of the current page. Anyway thats about it. The hover link now works in IE too.
Here is a test image using the above mentioned hover
Technorati tags: Css, Zoom
