[thelist] CSS iamge overlay/rollover...

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