View Full Version : Popup Image Viewer - how to adjust the size of pop up image?

04-14-2008, 11:38 PM
1) Script Title: Image size in Popup Image Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Describe problem: How can I adjust two things:

the color and font of the text (over which the mouse hovers) and

The size of the image that pops up??

Thank you

04-15-2008, 01:04 AM
Alright, to change the font:

position: relative;
z-index: 0;


position: relative;
z-index: 0;
font-family: Tempus Sans ITC; //Your font

For the second, I think that it does that automatically, but can we please see your code? Better yet, a link to the page?

04-15-2008, 01:12 AM
Thanks, I am still playing with the code. The original page is


and I am trying to help a friend with this page:


04-15-2008, 01:18 AM
Well, its looks good for me, except the image should be smaller, is that what you wanna change?

04-15-2008, 01:24 AM
Yes, i would like to make the image smaller and change the color of the word from blue to the deep red (#990000) like the rest of the text.

04-15-2008, 01:25 AM
Do I need to adjust the size first or can I define the size in the style statement?

04-15-2008, 11:46 AM
From what I can tell, all you need to do is adjust the size in the style like you said.

04-15-2008, 05:29 PM
Wish I knew how to do that... I understand the concept - just not which code to use. I was hoping you might have an example or tell me where i might find it. I am certainly willing to experiment.

Specifically, however, I don't know if whatever sizing code I insert would be in the CSS or HTML section... also, to which element should I apply the resizing?

04-15-2008, 06:23 PM
Never mind. I think I am getting close through trial and error.

04-15-2008, 08:39 PM
Alright, glad to help you.

12-12-2009, 11:59 AM
I apologize if this is the wrong place for this post, but can't find a better one.

I have implemented the CSS Popup Image Viewer in my PHP db pages and I have used only ONE image, not the two as is used in the original code. I just uploaded one image of the size I want for the larger image and then in the HTML I refer to the thumbnail size as a percent: that is width="70%" height="70%" and for the larger image, I use 100% for both.

You can see this in operation at

Just wanted to let folks know about this as a lot of people have commented on the overhead of 2 images. (I did it because I have a lot of objects to deal with and did not want to consume time sizing and uploading two images for every image I need.)


12-12-2009, 01:07 PM
For images of those sizes, generally that is a fine strategy, though your images are a bit larger (byte wise) then they probably need to be.

However, for images that are like 70x70 for the thumbnails and like 300x300 for the larger image, separate images would be better, though ideally in a case like that the thumbnails (and any other visible images on the page that follow the gallery) should be preloaded using HTML. That way the visible portion of the page would load faster, and any larger images not required via user interaction could be left on the server if need be (user leaves the page before it has completely downloaded) with no adverse consequences to the page visually.