SMART CSS IMAGE ENLARGE

• SINGLE FILE FOR THUMB AND LARGE
• NO SIZE CALCULATION
• NO INPUT OF DIMENSIONS IN HTML OR CSS, WORKS INDEPENDENT FROM ACTUAL DIMENSIONS
• CHANGE THUMB SIZE ON THE FLY
• FREE FOR ANY USE

I was working on a client project and decided to add some images to a page with a mouse over enlarge effect. I had seen many examples of this done with CSS. The client wanted an easy website that an average computer user could manage.

What I wanted to do is, design the page the way I want and let the client replace placeholder images with new ones. The problem is, I didn't want the client to bother about image dimensions. Even if they put in new images with different dimensions than before, the page should still maintain the same look.

There should be one folder for the images that are displayed on a page. When those are replaced with other images it should just work without any code alteration in the HTML or CSS even if the new dimensions are differenet.

You can do this with flash. Flash can resize images to pre set dimensions. The problem is you can't have lots of separate flash files on the same page. You could use a flash slide show. But you need to make space for the enlarged version to be displayed. In other words, the flash file would take too much space on the page. So I decided to go with the CSS idea.

This is what I want:

1. pure CSS
2. should validate
3. should work in all major browsers
4. should enlarge images on top of thumbnails and other content on mouse over (similar to 99designs and istockphoto)
5. single file for both thumbnail and large image
6. no calculation, no code editing, no dimension entering required
7. images should keep their aspect ratio in thumbnail size

Because I couldn't find anything like this, I wrote it myself. The example you see on this page meets all this criteria.

What does this mean to you as a web designer?
It means that you are now able to change all thumbnails on the fly by altering one value in the CSS even if you have a set of images with different dimensions.

Why is this a better method?
Other methods like this dynamic drive example or this css play example require two files, one for the thumbnail, one for the large version.

• You have to create the thumbnails yourself in an image editor. This means extra time and effort.
• You can not change the thumbnail size without recreating all thumbnails. This means less flexibiliy.
• When you open the page it will load both the thumbnail and the large version. And this means larger sizes and slower loading pages.

If it was possible to do this with a single file why wasn't it done before?
Actually it was. At Randsco.com you can find a similar CSS enlarger that works with a single file. That example is better than the other two mentioned above but the problem is, you have to enter thumbnail dimensions in the HTML for each thumbnail.

This requires calculating the thumb dimensions according the height and width ratio of the original file. For instance if you had an image at 500x350px and you wanted the thumb to be 200px wide, you would calculate the height like this: (200x350)/500= 140px and then enter this in the HTML code.

If you have a few images all at different sizes, like the ones on the left, you would need to do lots of calculations. Then off course you do the same all over if you want to alte the tumb sizes.

It is difficult getting this work without a specific height for the thumbnails. This is probably the main reason why it wasn't done before.

Click here to see and advanced example with floating images.

Click here to download the zip file.

Check the source code of this page to see all the CSS.

Enjoy,
Erdinc

Note: this is going to be my graphic design portfolio website if I ever manage to complete it. I'm aware that the presentation isn't the best at the moment.