CSS Image Gallery Hover Always

**bluewalrus** · 12-20-2008, 07:10 PM

1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...gallery/#thumb

3) Describe problem: The hover state stays on, when the mouse is above the image (anywhere above it) I think it is from the padding top I added because its reading the padding as part of the image for some reason something like this

| |

| Padding |

| |
| image| <---mouse off anywhere below here has the overlay go away
| Overlay |

http://www.esefdenim.com/gal.php

**jscheuer1** · 12-20-2008, 08:43 PM

In FF's developer tools at least, changing to:

Code:

.thumbnail span{ /*CSS for enlarged image*/
margin-top:15%;
position: absolute;
left: -1000px;
height:55%;
width:55%;
visibility: hidden;
color: black;
text-decoration: none;
}

Takes care of the problem. However, if that won't work in other browsers (I'm leaving it to you to test that, or to provide a demo with the change hard coded into it for me to test), it might be better to abandon both padding and margin, and to set a pixel or em top property, for example:

Code:

.thumbnail span{ /*CSS for enlarged image*/
position: absolute; /* Comment: margin and/or padding removed */
left: -1000px;
height:55%;
width:55%;
visibility: hidden;
color: black;
text-decoration: none;
}

and then (the exact number and/or units used may vary as per your preference):

Code:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 170px;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

**bluewalrus** · 12-20-2008, 08:58 PM

Yup you got it. Although in sarfai its displaying off by like 15 pixels for some reason ff, flock, and oprea its fine though, those are all the browsers i can test on, I'm a mac(er).

**jscheuer1** · 12-20-2008, 09:48 PM

Percentage margins and/or padding are sometimes unreliable cross browser because each browser determines for itself what the percentage is a percent of, and it may also depend upon how much room there is in the region that the browser decides to take the percentage from. This can vary due to browser peculiarities, and also from the size of the browser window. If the exact placement isn't critical, this can often be a viable strategy though. On the other hand, if you must have pixel perfect symmetry across as many browsers as possible, my second suggestion would probably be more effective. The distance from the top of the window of the enlarged image visa vis the position of the thumbnails will however always depend to a certain extent upon how far the thumbnails are from the top of the window in that browser.

Edit: Since the distance of the thumbnails from the top appears to vary with the size of the browser window, you will either have to be more specific about the thumbnail's location, or accept some variation in where the larger images appear in relation to the thumbnails

**bluewalrus** · 12-21-2008, 04:22 PM

Oh Oh okay thanks

**bluewalrus** · 12-21-2008, 11:58 PM

It was working fine but I just uploaded this other image and it is being stretched horizontally. I have the height and width set to 55% which i thought would keep the images original proportions the same. Is this incorrect as well, or is there a more standard way of sizing images when you do not know all of the images sizes? Thanks again for any other suggestions you can offer.

**jscheuer1** · 12-22-2008, 04:35 AM

There are other ways of scaling images (with the browser*), but it can get quite complicated. For something like this, the easiest method would probably be best. That is to set only one dimension, either the width or the height. In a case like that, the browser will almost always scale the other dimension. You must make sure that no other style or attribute interferes though.

*scaling (down images) with the browser is inefficient, and depending upon the situation (like if the full size image is never shown) can waste disk space, and always increases page load time when a scaled down larger image is standing in for a thumbnail version. Browser scaled images can lack resolution compared to those scaled to size in an image program. However, even with all that, if care is taken to do things in the most logical (from the point of view of minimizing load times as much as possible) manner it can be a form of preloading, and work out fairly well.

**bluewalrus** · 12-22-2008, 05:04 AM

You've solved it again. Thanks is there a way to set the position to be where the mouse is? Right now the margin-top is not working on the second row and if i set it too it won't work for the first. I want the image to be centered from where the mouse is on the image. I know the margin top and the left absoulte are setting this off right now but didn't know if there was anyway to have it center on the image like 15 pixels below so some of it would also still be visible. Thanks again.

**jscheuer1** · 12-22-2008, 07:38 AM

Well, the idea is to arrange things so that the larger images don't overlap the thumbnails. The way you have it now, there's not room enough for that. Another strategy might be to forget about the gallery container, make the .thumbnail class position relative, so that the larger images will be absolutely positioned relative to the thumbnail link. There are many possibilities. But there is no way with this setup to follow the mouse, css style just won't allow for that. A javascript could be used, in fact my new Expando (just adopted to the Dynamic Drive Library) could be used. It will not follow the mouse, but if each image is absolutely positioned inside its own relatively positioned division of limited size, the effect can be quite nice, because the images wouldn't push each other around the way that they do on the demo page. But it would no longer have the advantage of this viewer, which is not requiring javascript.

**bluewalrus** · 12-22-2008, 02:09 PM

Okay, I like the expando script and look. I've put it in pulled out the css image gallery. The page already uses javascript else where so adding another one won't be a problem. Is the script written so that it expands till it reaches the original size and if so is that changeable (can css's height and width be used in place of the img tag height and width or does it read that tag)?

So I should make each thumbnail in it's own div with relative positioning (I pulled out the.thumbnail class) for the expand to just go over the others?