Show image on mouseover using CSS

[gshelvankar]

I have the following code that works.

HTML

<div id="mainContainer">
.
.
.
<div id="menuContainer">
        <div id="menu3"><a class="thumbnail" href="business_two.html"><img src="images/ncb_integrate_business_one_menu3.jpg" width="126" height="45" />
        <span><img src="images/ncb_integrate_business_drop.png" width="164" /></span></a></div>
</div>
.
.
</div>

and the CSS

#menu3 { width:126px; height:45px; float:left; }

.thumbnail {
    zoom:1.0;
    position:relative;
    text-decoration:none;
}
.thumbnail span {
position:fixed;
    top:150px;
    left:500px;
    width:350px;
    left:-999em;
    z-index:990    
}
.thumbnail:hover {visibility:visible; }
.thumbnail:hover span { left:38%; opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */ }
* html .thumbnail span {position:absolute;}

The above works fine, just that when its a ‘span’ i am guessing it doesn’t follow rules of the ‘div’ its under – In this case the ‘menuContainer’.

On the computer i am coding on looks fine. But when i see it on an ipad or another screen size, the image that shows on-hover, moves 38% according to the ipad screen size.

I have a #mainContainer { margin: auto; width: 1000px; overflow:hidden; } Can i keep the .thumbnail span within the #mainContainer and not flow out anywhere it likes ?

Thanks a million guys G

[Paulie_D]

Could you put something in Codepen with linked images?

I’m having trouble visualizing what this code is actually doing.

Are you swapping out images in a menu?

Are you showing a second image somewhere else on the page when one image is hovered?

You say it’s working (sort of)…could we see a link?

[Author]

Posts