Jump to content

Images Behind Image Hover Shine Through


son
 Share

Recommended Posts

I have been involved in a project where we use a simple hover effect. The code is:

<div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="small.jpg" alt="Small" " /><img src="big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div>

and relevant css is:

.hover {position:relative;}.hover a .preview {display:none;}.hover a:hover .preview {display:block;position:absolute;top:160px;left:0;z-index:2;}

It works in all browsers other than IE7 (and probably IE6). I added now 'style="z-index:-1;' to the small image, but cannot test. I signed up and paid for one day with browser cam, not realising that it only captures what the screen looks like without me being able to try to hover. Does anyone have IE7 and can do a test for me? Or, is there a way in browser cam to do what I am after? I could send url via private message...Son

Link to comment
Share on other sites

i tested in ie7, and it worked fine, sorry big no-go (as usual) for ie6, but i came with working solution, that i think will work in all browsers.instead of using display: i used position: and used the small image as background for the anchor link.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html>

Link to comment
Share on other sites

i tested in ie7, and it worked fine, sorry big no-go (as usual) for ie6, but i came with working solution, that i think will work in all browsers.instead of using display: i used position: and used the small image as background for the anchor link.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html>
Thanks for code. Did you say you tested this in IE6? I have a bit of an issue as I do not have IE6 and BrowserCam etc can only test for what the visuals look like without actually doing anything to the page (as to hover over a section etc). How do you do your normal testing? Is there a facility to use that can test those things?Son
Link to comment
Share on other sites

its works for IE6, IE7, Firefox, Chrome, Safari, Opera.to test in multiple IE browsers, try googling "Internet Explorer Collection"
I just tested it in latest Firefox and IE8 and the hover image goes behind the background image... I used exactly your code and just replaced with correct images. Son
Link to comment
Share on other sites

I just tested it in latest Firefox and IE8 and the hover image goes behind the background image... I used exactly your code and just replaced with correct images. Son
I have it now also working for IE7, but IE6 is still a problem (having installation issues with Internet Explorer Collection I use now IETester, which seems to be ok so far). The css I use is:
.hover {}.hover a .preview {display:none;}.hover a:hover .preview {position:absolute; display:block; z-index:999;}

I tested your code again, but it just does not work for me. Strange that it works for you. For me it does not even work with FF...Son

Link to comment
Share on other sites

using display:none and block does not work for IE6, unless you include javascript fix.the code i supplied, worked in all browsers, ie6 to ie8, firefox 3.0.16, chrome, opera, safari just fine.though idid spot extra semi-colon in code, sorry!, but that did not make any difference..hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/should be:.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/copy all, the below code exactly to htm page document, change reference to your images (in bold), and load the page.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html>

Link to comment
Share on other sites

using display:none and block does not work for IE6, unless you include javascript fix.the code i supplied, worked in all browsers, ie6 to ie8, firefox 3.0.16, chrome, opera, safari just fine.though idid spot extra semi-colon in code, sorry!, but that did not make any difference..hover a{background:url('image_thumb.gif') no-repeat #fff;; width:100px; height:75px; display:block; } /*#fff required for IE6*/should be:.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/copy all, the below code exactly to htm page document, change reference to your images (in bold), and load the page.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('image_thumb.gif') no-repeat #fff; width:100px; height:75px; display:block; } /*#fff required for IE6*/img.preview{position:absolute; left:-9999em; top:160px; }:link:hover, a:hover img.preview{ background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="image_big.jpg" alt="Big" class="preview" /></a><h4>Example</h4></div></body></html>
Try to add several:
<div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="[b]image_big.jpg[/b]" alt="Big" class="preview" /></a><h4>Example</h4></div>

and test again. It does go to back behind the thumbs...Son

Link to comment
Share on other sites

I see what you mean now, try below, the only problem is every thumbnail is going to be sett as background image, unless you produce dynamically using php.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">.hover {position:relative;}.hover a{background:url('smallimage.jpg') no-repeat #fff; width:100px; height:75px; display:block; overflow:inherit !important; overflow:hidden;} /*#fff and overflow:hidden; required for IE6*/img.preview{position:relative; left:-9999em; top:160px; }:link:hover, a:hover img.preview{background-color:transparent; left:0px;} /* link:hover, and transparent required for IE6*/</style></head><body><div class="hover"><a href="webpage.php?fn_id=1" title="Webpage"><img src="bigimage1.jpg" alt="Big" class="preview" /></a><h4>Example 1</h4><a href="webpage.php?fn_id=1" title="Webpage"><img src="bigimage2.jpg.jpg" alt="Big" class="preview" /></a><h4>Example 2</h4><a href="webpage.php?fn_id=1" title="Webpage"><img src="bigimage3.jpg" alt="Big" class="preview" /></a><h4>Example 3</h4></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...