css-only image popup when hover image link: is it possible?

fredo

unread,

Nov 22, 2006, 10:36:09 AM11/22/06

to

I've studied Eric Meyer's pure css popups, version two:

http://meyerweb.com/eric/css/edge/popups/demo2.html

which pops up an image when I roll over a text link.

Now I want to pop up a large image when I roll over a thumbnail. I've
tried some things, but can't make it work. See here (Warning: adult
matter):

http://www.simple-nude.com/demo.html

Can some kind soul clue me in how to do this with css only, no js?

Thanks!

-- fredo

Nik

unread,

Nov 22, 2006, 10:43:50 AM11/22/06

to

Fredo,

I've no objection to adult content, especially if it's accompanied like
a polite warning such as the one you include. It does, however, make it
difficult to look at your page when I'm at work.

It might be worthwhile making an office-friendly version of your
problem? Have you read
www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp ?

Nik

PS - those wanting to look at css-popups not featuring beautiful (or
indeed, any) nudes, could see the problem I'm about to post ;-)

Nik

fredo

unread,

Nov 22, 2006, 1:51:55 PM11/22/06

to

Nik wrote:

> Fredo,
>
> I've no objection to adult content, especially if it's accompanied like
> a polite warning such as the one you include. It does, however, make it
> difficult to look at your page when I'm at work.

Doh! Thanks. I've put a benign version at:

http://www.simple-nude.com/demo.html

> Have you read
> www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp ?

I have now, and there are some good insights in the article and its
comments.

Thanks, Nik.

-- fredo

Nik

unread,

Nov 23, 2006, 6:34:01 AM11/23/06

to

fredo wrote:
>
> Now I want to pop up a large image when I roll over a thumbnail. I've
> tried some things, but can't make it work. See here (Warning: adult
> matter):
>
> http://www.simple-nude.com/demo.html
>
> Can some kind soul clue me in how to do this with css only, no js?
>

Fredo,

I think you need to set a class for both the thumbnail and the larger
image, and to control each of them with a{...} and a:hover{...} rules.
Note that the images to pop up should first be set to height:0 by a{...}
to hide them.

At the moment the

div#links a:hover img {
position: absolute;
left: 55%;
height: 100px; }

rule is moving both the image, which is the sole content of the <a>
element, to a different part of the screen when you hover one it. This
takes the image out from under the mouse, so the hover goes off. Hence
the image returns to its original position, under the mouse, and the
hover is back on.

I'm not clear what you wish to happen to the thumbnail image when the
hover is active - should it continue to remain exactly where it was?

HTH

Nik

jim

unread,

Nov 23, 2006, 9:11:50 AM11/23/06

to

The following code, copied from the link above @ Mr. Meyers' site
is slightly adapted to provide what you need. It works in msie and
ffox; however, the absence of an image src (for image2) will cause
firefox to display the alt placeholder. otherwise, when you input an
actual source, you only see image1 as you intend, and img2 will appear
on hover. I thought too (as the previous poster) that a different
class would be needed for each and every link with its own set of 2
images. It appears you can use the same css rule for them all and just
change your image sources (assuming you want your popup image to appear
in the same spot for all mouseovers;)

------------CODE----------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Popups 2</title>
<style type="text/css">

</style>
</head>
<body>
<div id="links">
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving03.gif"
/>
<img class="im2" src="blah.gif" alt="first link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving04.gif"
/>
<img class="im2" src="blah.gif" alt="second link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving05.gif"
/>
<img class="im2" src="blah.gif" alt="third link gif"/>
</a>
<a href="#">
<img class="im1" src="http://www.google.com/logos/thanksgiving06.gif"
/>
<img class="im2" src="blah.gif" alt="fourth link gif"/>
</a>

</div>
</body>
</html>

fredo

unread,

Nov 29, 2006, 4:48:30 AM11/29/06

to

THANK YOU, Jim. Your suggestion worked perfectly in FF, but there's a
slight problem in IE when I change display:block to display:inlline.
For a quick example, see:

http://www.simple-nude.com/demo.html

I am posting another question about this IE glitch on ciwas.

Thank you again, guys.

-- fredo

L5hopes

unread,

Jan 12, 2007, 4:06:48 PM1/12/07

to

I've been messing with the thumbnail-to-full css for a client's site
and came across a bug in Safari browsers (v2.0.4). In this case, the
full sized image needs to appear at right {position: absolute; right:
1%;}. When that code was in the "a:hover .im2" class, Safari displayed
only half the image, and at left of screen! Very peculiar.

So, just for kicks, I moved that into the non-hover portion (what does
it matter where the hidden full image is if it is hidden by being
width:0 and height:0?): "a .im2".

Now Safari is happy.

Hope this helps someone.

The only remaining kink is Firefox and z-index troubles. IE is happy.
But Firefox puts the full sized image under other images on the page
that come later in the document. Fortunately, due to the layout, it
only happens in a couple of instances (as long as the browser window is
reasonably large), but it is annoying that I can't fix it. They're all
in the same div, and are coded as list items, so setting a high z-index
for the full-sized images (and thumbs at z-index:1) should take care of
things...

'Tis a mystery.

Anybody who cares to take a look, feel free to visit:
http://tashaphotography.com/set_butterflies.php

L5hopes

unread,

Jan 12, 2007, 4:35:57 PM1/12/07

to

Try
http://tashaphotography.com/set_butterflygarden.php instead. It has a
vertical image in the first row, which is what most clearly displays
the Firefox z-index problem.