- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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?