[thelist] Image with cynamic text rollover... back to 'basics'! ; -p
ben morrison
morrison.ben at gmail.com
Wed Dec 10 04:25:55 CST 2008
On Wed, Dec 10, 2008 at 10:18 AM, Tris <beertastic at gmail.com> wrote:
> Hi all..
>
> I've been asked to add a rollover to a site.
> all good. but it's a little more complicated and i've not touched
> rollovers in a while..
I'm sure you asked about this last week?
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