Hoverbox issue: thumbs in middle

[kurt.santo]

I use the hoverbox effect, where you hover over a thumb and the larger pic shows in its place. The CSS is:

#pics a .preview {display:none;}#pics a:hover .preview {display: block;position:absolute;top:2px;left:2px;z-index:1;}

with html as:

<a href="photos.htm"><img src="assets/thumbnails/lion.jpg" width="195" height="129" /><img src="assets/photos/lion.jpg" width="786" height="522" class="preview" /></a>

I have assembled all thumbs nicely in a rectangular shape with the main pictures filling in exactly the rectangular shape consisting of 16 thumbs. My problem now: The thumbs in the middle are only accessible when you click into the main picture while it shows. Otherwise, a larger picture of a thumb from side is always opened first. Is there a way to access those in a better way?Kurt

[syco]

In the CSS you specified that it would be in a section called pics. Try:

<div id="pics"><a href="photos.htm"><img src="assets/thumbnails/lion.jpg" width="195" height="129" /><img src="assets/photos/lion.jpg" width="786" height="522" class="preview" /></a></div>

[kurt.santo]

In the CSS you specified that it would be in a section called pics. Try:

<div id="pics"><a href="photos.htm"><img src="assets/thumbnails/lion.jpg" width="195" height="129" /><img src="assets/photos/lion.jpg" width="786" height="522" class="preview" /></a></div>

Sorry, I left out that bit. I have a div called pics around. As I said it is all working fine. It is just a bit awkward to access the thumbs in middle...Kurt

[jlhaslip]

Might be a Browser issue here. Which Browser are you using? and does it happen in other Browsers, too?Can you post a link to the Hoverbox page, please.

[kurt.santo]

Might be a Browser issue here. Which Browser are you using? and does it happen in other Browsers, too?Can you post a link to the Hoverbox page, please.

It does it in any browser and I think it is quite normal what it does (just looking at better ways of doing it). I mean, all my main pics show in exactly the same place hiding the thumbs underneath, which are placed one by one with no space in between. So, if you attempt to get to the ones in middle you will always hover over the ones on side and therefore the larger picture obstructs the all thumbs. If you wanted to select the ones in middle you can click into large picture (I linked them all to this particular page the thumbs are one) to see all thumbs again (and if you are clever and you click in middle you can now hover there to see larger pics of middle thumbs... Never mind, guess I do not use hoverbox effect for that page. Think this is how it is.Just in context with same page: Have stylesheet for IE only

<!--[if IE]><link rel="stylesheet" type="text/css" href="assets/ie.css" media="all"><![endif]-->

How can I do this for safari? Would I say [if Safari]?Kurt

[jlhaslip]

Kurt,think about it for a minute... The Hoverbox effect happens when your mouse is over top of an image. As you move the mouse across the outer pictures, they are "hovering" on the outer pictures, so the on-hover css will take effect. No surprise that the outer pictures would get larger in that case.As far as i know, there is no way to delay the on-hover effect as you move across the outer images. Possibly a javascript solution *might*be available?

[kurt.santo]

Kurt,think about it for a minute... The Hoverbox effect happens when your mouse is over top of an image. As you move the mouse across the outer pictures, they are "hovering" on the outer pictures, so the on-hover css will take effect. No surprise that the outer pictures would get larger in that case.As far as i know, there is no way to delay the on-hover effect as you move across the outer images. Possibly a javascript solution *might*be available?

You are totally right. I realised this later on as well. For this design I choose now a different approach, which works better...Cheers,Kurt