Question

I want to do this:

I have a div with item: title, image, some text. When I put mouse over that div I need this div to became gray, like image 2. I have code like this:

CSS

.container div {
    display: none;
    width: 250px;
    height: 250px;
}

.container:hover div {
    display: block;
}

.graydiv {
    background-image:url(over.png); // transparent gray png
    position: absolute;
    margin-top: -250px; 
}

HTML:

<div class="container">
<img src="someimg.jpg" alt="" />
<p>some text</p>
<p>some text</p>
<div class="graydiv"></div></div>

But IE8 don’t show gray div…Chrome, Firefox and so on is ok!

Also I need the whole Div to be a link…

So any ideas what to do and what to use?

Answer 1

Try this. http://jsfiddle.net/QZbRw/

HTML

<a href="#">
    <div class="container">
        <img src="someimg.jpg" alt="" />
        <p>some text</p>
        <p>some text</p>
    </div>
    <span class="hover"></span>
</a>​

CSS

.container {
 width: 250px;
 height: 250px;
 background:#FFF;
}

a:hover .hover{
 width: 250px;
 height: 250px;
 background:#000;
 opacity:0.5;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 filter: alpha(opacity=50);
 z-index:100;
 float:left;
 position:relative;
 top:-250px;
}

​