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'});  
  }  
}

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'});  
  }  
}

• javascript
• jquery
• html
• css

• The sample code you've provided has a fully opaque image, and the opacity doesn't change on hover, so it's difficult for us to know what your problem looks like. Could you provide a plete example, including the hover effects that don't work as you'd like? The easiest way is probably to create a jsfiddle that shows the problem. In that way, others can try out your code directly and see what you mean. – Pär Wieslander Commented May 19, 2011 at 9:54
• @Pär Wieslander : i have added jquery code in my question . If you are still unclear about the question do let me know.. Sorry for providing half information – JAB Commented May 19, 2011 at 10:10
• 1 The problem seems to be that you change the opacity of the .imagHolder wrapper instead of just the image. See the ment in my updated answer for details. – Pär Wieslander Commented May 19, 2011 at 10:41
• @Pär Wieslander : Excellent Par ... It worked.. You are right i was setting opacity on wrapper instead of img tag.. Thank you very very very much... Thanks for spending your precious time on me.. – JAB Commented May 19, 2011 at 10:50

2 Answers 2

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 ments, you need to set the background color on a wrapper around the image. Here is a working example demonstrating the technique: http://jsfiddle/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.

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 :)