How do i mask images on hover?

Question

I have 9 images aligned in 3 rows. Each row has 3 images.The images popup on hover. Except the image which popups the rest of images should be darkened. Since i have yellow background if i try to reduce opacity of the images , the images appear dim yellow . So i can't reduce opacity. Any other solution . Please help My Sample Code

<div id="content">  
  <ul>  
    <li> <div class="imagHolder"> <img src="my-image.jpg" width="320" height="240"> </div> </li>  
  < /ul>  
</div>

CSS

#content {  
  background : yellow;  
  width : 940px;  
  height : 500px;  
}

Even if i set background color black to the wrapper imagHolder , the images appear dim yellow on hover

Jquery code

jQuery(document).ready(function() {  
  jQuery('.imagHolder').hover (function() {  
    jQuery('.imagHolder').css({'opacity' : '0.5'});  
  },  
  function(){  
    jQuery('.imagHolder').css({'opacity' : '1.0'});  
  }  
}

Answer 1

You can set background-color: #000 on the image elements -- then you should be able to reduce opacity to darken the images.

As pointed out in the comments, you need to set the background color on a wrapper around the image. Here is a working example demonstrating the technique: http://jsfiddle.net/UWJhM/

---

The problem with the code in your example is that you're changing the opacity of the wrapper div rather than the opacity of your image. Set a black background on your image wrapper, and then change the opacity of the image only , and you should be fine.

On a side note, JavaScript isn't needed for this effect. You could substitute your jQuery code with CSS rules that change the opacity on hover, and still get the same effect. Again, see the jsfiddle mentioned above where this technique is illustrated.

Answer 2

Tried it the other way? Make a div block on top of the image as such:

<div class="imgHolder">
<img src "image01.jpg" width="100" height="100"/>
<div class="imgMask" ></div>
</div>

of course u have to apply correct css as such:

.imgMask {
width:100px; height:100px; position: absolute; top: 0; left: 0; background-color: #000; display: none;
}
.imgHolder {
position: relative;
}

just .show() the imgMask when necessary :)