positioning image on hover

image refuses to be positioned absolute

[nicoletS]

Hello all,
I've tried to come up with a page that contains (among other things)
1. an explanatory text
2. a larger image that shows when hovering over a thumbnail
3. a row of thumbnails
As I'm fairly new to the css world, my head can not figure out what I do wrong. I've tried in several ways, but the "larger image" will not stay in its place.
Is there anyone who can point out what I do wrong?
I've put an example online at <snip>
thnx and greetings, nicolet

[edited by: SuzyUK at 9:38 pm (utc) on April 2, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[nicoletS]

Hello all,

I'm sorry - newbie's first mistake. Did not understand that example page URLs were not allowed. Here's my second try

I've tried to come up with a page that contains (among other things)
1. an explanatory text
2. a larger image that shows when hovering over a thumbnail
3. a row of thumbnails
As I'm fairly new to the css world, my head can not figure out what I do wrong. I've tried in several ways, but the "larger image" will not stay in its place.
Is there anyone who can point out what I do wrong?

from the XHTML =====
<div id="inhoud">
<h1>Cum sociis</h1>
<p>Aliquam mollis tempus diam. Cum sociis natoque penatibus et magnis dis</p>
</div>
<div id="fotos">
<ul>
<li><a href="#"><img src="foto/herenhuish1k.jpg" alt=""/><span><img
src="foto/herenhuish1g.jpg" alt="" /></span></a></li>
<li><a href="#"><img src="foto/herenhuish3k.jpg" alt=""/><span><img

src="foto/herenhuish3g.jpg" alt="" /></span></a></li>
<li><a href="#"><img src="foto/herenhuish4k.jpg" alt=""/><span><img

src="foto/herenhuish4g.jpg" alt="" /></span></a></li>
</ul>
</div>
===============End

+++++++++++++++From css
#inhoud
{
margin: 230px 350px 0 9.5%;
max-width: 550px;
min-width: 300px;
}

a img {
border: none;
}

#fotos
{
position:relative;
margin: 330px 350px 0 9.5%;
max-width: 550px;
min-width: 300px;
}

/* start lijst opmaak horz */

#fotos ul {

margin: 0;
padding: 0;
list-style-type: none;
}

#fotos ul li {
display: inline;
}

#fotos ul li a {
text-decoration: none;
border: none;
padding-right: 2px;
}

/* end lijst opmaak horz */

img {
border: none;
}

span {
display: none;
}

span img {
border: none;
}

a:hover {
border: none;
text-decoration: none;
}

a:hover span {
display: block;
height: 300px;
visibility: visible;
z-index: 100;

}

a:hover span img {
position: relative;
top: -400px;
z-index: -1;
}
+++++++++++++++End css

Well, that looks like a lot of code, but I don't see how I could explain otherwise.

thnx again and greetings, nicolet

[londrum]

if you want a really flash one, forget all that and search for -- image gallery hover CSS -- in google.
go to the stu nicholls page

[Dabrowski]

Whoa! Lucky I got here before the moderators! That URI won't be there tomorrow.

Anyway....

You have:

a:hover span {
display: block;
height: 300px;
position: absolute;
margin-top: -400px;
margin-left: 0;
}

And here's how it's working:

'position: absolute' means from the position of the element on the page, ok.
'margin-top: -400px' means the image is shifted 400 pixels upwards, ok.
'margin-left: 0' pointless. This means 0 pixels from the element on page, in this case the thumbnail, so basically means the same left as each thumbnail.

Try removing this and adding 'left: 9.5%' to match #fotos.

[Dabrowski]

Londrum, actual solutions and explanations are much more helpful. People can't learn unless they can see their errors.

[londrum]

some people like explanations, some people like ready-made solutions. as long as we're helping the guy what does it matter.
you put people off helping at all when all they get for their trouble is a lecture.

[nicoletS]

Hi Dabrowski,
Thanks for your quick reply (and your chance to see my URI ;-)
I've now removed the margin-left, tried it again with left: 9.5%. That was not the solution.
Have now no "margin-left" or "left" in the 'a:hover span' rules. That works fine with firefox, but in IE the larger image insists on jumping to the left with each thumbnail.
Any other thoughts? Or pointers on how I could fix position for each larger image seperately perhaps?

And Londrum, you are right. Stu Nichols has fine gallery's. It's just that this -almost- works and fits the rest of my lay-out. And, not unimportant, I understand what I'm doing!

[Dabrowski]

Here's what I think is happening:

Your hover is aligning with the SPAN tag, which means the popup's left will be in relation to the SPAN tag.

What you need is to align it with the DIV#fotos. Can you paste me your JS for this rule?

[nicoletS]

mm So far I have no JS, tried it with CSS only

[Dabrowski]

ok, your CSS says 'behaviour: url("csshover.htc")', that file contains the JS code that actually makes the hover popup thing work. For some reason I can't download it, can you email it to me? I'll stickmail you my address.

[SuzyUK]

Dabrowski that file is not relevant to what is happening, it is simply a file that makes IE6 and below honor

:hover

on all elements (instead of just the <a>nchor element) - it is quite a well known file - available for download @ whatever:hover [xs4all.nl]

nicoletS - Welcome to WebmasterWorld btw..

a:hover span {
display: block;
height: 300px;
position: absolute;
margin-top: -400px;
margin-left: 0;
}

try using the actual co-ordinates instead of margins e.g.

a:hover span {
display: block;
height: 300px;
position: absolute;
top: -400px;
left: 0;
}

Suzy

[Dabrowski]

Hi SuzyUK, I realise that now I've seen it, believe it or not I've never actually used behaviours before so wanted to check.

I have already suggested your solution.