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

[fredo]

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]

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

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
https://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

[fredo]

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


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
https://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

[Nik]

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

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]

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

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:175p x; 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>

[fredo]

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


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:175p x; 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

[L5hopes]

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


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:175p x; 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

[L5hopes]

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


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:175p x; 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.