By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,773 Members | 1,779 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,773 IT Pros & Developers. It's quick & easy.

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

P: n/a

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

Nov 22 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Nik
fredo wrote:
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
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
http://www.tanfa.co.uk/css/articles/...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
Nov 22 '06 #2

P: n/a

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
http://www.tanfa.co.uk/css/articles/...popups-bug.asp ?
I have now, and there are some good insights in the article and its
comments.

Thanks, Nik.

-- fredo

Nov 22 '06 #3

P: n/a
Nik
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
Nov 23 '06 #4

P: n/a
jim
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----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->

<!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">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175px; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</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>

Nov 23 '06 #5

P: n/a

jim wrote:
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----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->

<!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">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175px; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</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>
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

Nov 29 '06 #6

P: n/a

fredo wrote:
jim wrote:
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----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->

<!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">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175px; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</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>

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
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

Jan 12 '07 #7

P: n/a

L5hopes wrote:
fredo wrote:
jim wrote:
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----------------
<!-- MOST OF THIS CODE IS COPIED FROM:
http://meyerweb.com/eric/css/edge/popups/demo2.html
BUT AMENDED SLIGHTLY TO RESPOND TO THE PROBLEM REFERENCED HEREIN
-->
>
<!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">
<!--
div#links {
position: absolute;
top: 81px; left: 10px;
}
div#links a {
margin:0px;
display:block;
}
div#links a:hover {
border:0px black dashed;
}
div#links a .im1{width:175px; height:65px; border:5px red double;}
div#links a .im2 {height: 0; width: 0; border-width: 0;}
div#links a:hover .im2 {position: absolute; top:0px; left: 355px;
height:110px; width: 276px;}
-->
</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>
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

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
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.

Jan 12 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.