[thelist] CSS iamge overlay/rollover...
ben morrison
morrison.ben at gmail.com
Tue Dec 2 11:24:57 CST 2008
On Tue, Dec 2, 2008 at 4:40 PM, Tris <beertastic at gmail.com> wrote:
> #overlayPlaceHolder:hover {
> position: relative;
> width: 100px;
> height: 100px;
> visibility: visible;
> background-color: #F00;
> filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;
> z-index: 10;
> }
You don't have to worry about IE 6 then? It Doesn't support PSEUDO
class on anything other than an anchor.
If you do, then you are going to require some JS - simple JS to add an
extra class on mouseover, unless you can be very clever with your CSS.
Also as on a previous thread it maybe easier to use a
background-color, or change the code so the opacity is not inherited.
<style>
.imagePlaceHolder {
position: relative;
width: 100px;
height: 100px;
display:block;
}
.imagePlaceHolder span {
position: absolute;
left:-999em;
}
.imagePlaceHolder:hover span, .ieExtraClass {
left:0;
bottom:0;
display:block;
width:100%;
background-color: #F00;
color:#fff;
filter:alpha(opacity=50);
opacity:.5;
}
</style>
</head>
<body>
</head>
<body>
<div id="rolloverPlaceHolder">
<a class="imagePlaceHolder">
<img
src="http://www.bbc.co.uk/home/features/d/content/images/2008/12/02/human_nuclear_button_afp_400x260.jpg"
width="100" height="100" style="background:#ccf" />
<span>Over lay text</span>
</a>
</div>
</body>
--
Ben Morrison
More information about the thelist
mailing list