473,320 Members | 1,719 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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


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

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

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

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

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

16
CSS
by: Samir | last post by:
Is the only way to get make changes on all pages with just one time is using cascading style sheets? Is there any other option other than CSS??
4
by: Eje | last post by:
I am developing a webapplication for a company holding stocks for a number of customer companies. The customers can order parts via this new appliction. My application is linked to each of the...
4
by: FC | last post by:
Hello folks, I was wondering if there any other method of achieving the following: I have a XSL transformation outputting a SVG document. For reasons too long to explain here, I must embed a CSS...
0
by: Hsun-Cheng Hu ?J?V?? | last post by:
Dear all, I had written a Web CSS Editor (Javascript based). It is easy and free. You may download a copy and build it with your programs. Here is its descriptiong: Web CSS Editor is a...
27
by: hholidayy | last post by:
Hi, I'm very new to web designing I'm designing my first web site for a friend of mind that has a small business I recently finished a book on HTML and started playing in Dreamweaver MX Then...
6
by: timmy_dale12 | last post by:
hi im am trying to make a soccer stadium with a table and some buttons : <html> <head> <link rel="stylesheet" type="text/css" href="h:diverse/stadion.css" /> </head>
2
by: DU | last post by:
Hello fellow stylers, I don't understand the error report given by the W3C CSS validator: "Line: -1 unrecognized media screen, tv " I checked carefully and can't figure this one out. I...
13
by: Kris | last post by:
Hello, By accident I noticed that a hack to hide CSS from IE4.x/Mac also hides it from WebTV Viewer. Since I noticed a little while ago a post here that mentioned the 'incompatibility' of WebTV...
11
by: Peter Foti | last post by:
Hi all, I have a form that contains a 2 column table. In the left column is the description for a particular input (ie - "First Name", "Last Name", "Phone Number", etc.). In the right column...
145
by: Mark Johnson | last post by:
Oddly enough, I found it difficult, using Google, to find a list of best-of sites based on the quality of their css packages. So I'd ask. Does anyone know of particularly good sites which are in...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.