Hover over thumbnail; show larger version image in difrent position 1

[iteach2]

Hi,

I am attempting to make a CSS/PHP photo gallery. I have php pulling .jpg images from directory. Then with a loop pull images out.

What I am asking is if it is possible with CSS to create a thumbnail of the image, then when I hover over I can get a larger size.

 

[iteach2]

Sorry I forgot to mention I would like to show the larger image in a diffrent location on the page:

For ex:

[hover thum image here]



[larger thumb show here]

 

[traingamer]

See this thread for a couple of jumping off points: thread770-1364969

CSS can't be used to 'make thumbnails'. You would have to do this via some other method.

You could display 'full-size' images in a smaller format by adjusting the width and height in the html (via css or straight code). The problem with this is that all of the full-size images will be downloaded to the browser with all of the overhead that entails.
This may not be a problem if you have 4 or 5 pictures, but if you have many megabytes of data in the full-size pictures, you may want to try some other method (JavaScript, or separate pages for the full-size pictures).

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[iteach2]

Thanks traingamer,

Here is the final result. Also, you can create thumbnails with CSS.

http://www.iegraphics.com/ezgal/ezgal.php

 

[traingamer]

Very nice.

I think we're just arguing semantics about 'creating' thumbnails with css.
I meant you can't make new images with css. As your page demonstrates, you certainly can display them at a different resolution than the inherent size.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill