How to darken an image on mouseover

Question

My problem    I have a number of images  inside hyperlinks   and I want each to darken on mouseover  i e  apply a black mask with high opacity or something   and then go back to normal on mouseout   But I can t figure out the best way to do it   I ve tried      Jquery color animate and some javascript references  Setting the opacity of the image with javascript    I don t want     Image start at 80  opacity then go to 100  on mouseover  that s easy   To swap between 2 images  one light  amp  one dark   forgot the mention this sorry     To reiterate    I want in image  inslide a hyperlink  to darken on mouseover and then lose its darkness on mouseout   Thoughts   UPDATE     This is my progress from suggestions  Looks fine in IE8  but not in FF3   lt html gt       lt body gt           lt a href  http   www google com  style  background-color black  opacity 1 filter alpha opacity 100   gt               lt img src  http   www google co uk intl en uk images logo gif  width  200               style  opacity 1 filter alpha opacity 100   onmouseout  this style opacity 1 this filters alpha opacity 100               onmouseover  this style opacity 0 6 this filters alpha opacity 60    gt           lt  a gt       lt  body gt   lt  html gt    Thoughts   -- Lee  ANSWER  I m going with this  seems to work in IE8  amp  FF    lt html gt       lt head gt           lt style type  text css  gt            outerLink                        background-color black               display block               opacity 1              filter alpha opacity 100               width 200px                     img darkableImage                        opacity 1              filter alpha opacity 100              lt  style gt       lt  head gt        lt body gt           lt a href  http   www google com  class  outerLink  gt               lt img src  http   www google co uk intl en uk images logo gif  width  200               class  darkableImage  onmouseout  this style opacity 1 this filters alpha opacity 100               onmouseover  this style opacity 0 6 this filters alpha opacity 60    gt           lt  a gt       lt  body gt   lt  html gt

User · Answer

How about this      lt style type  text css  gt      div frame   background-color   000        img pic hover         opacity   6        filter alpha opacity 60          lt  style gt    lt div class  frame  gt       lt img class  pic  src  path to image    gt   lt  div gt

User · Answer

Create black png with lets say 50  transparency  Overlay this on mouseover

User · Answer

Put a black  semitransparent  div on top of it

User · Answer

Or  similar to erikkallen s idea  make the background of the A tag black  and make the image semitransparent on mouseover  That way you won t have to create additional divs    CSS Only Fiddle  will only work in modern browsers  JavaScript based Fiddle  will  probably  work in all common browsers      Source for the CSS-based solution   a darken       display  inline-block      background  black      padding  0     a darken img       display  block       -webkit-transition  all 0 5s linear         -moz-transition  all 0 5s linear          -ms-transition  all 0 5s linear           -o-transition  all 0 5s linear              transition  all 0 5s linear     a darken hover img       opacity  0 7       And the image    lt a href  http   google com  class  darken  gt       lt img src  http   www prelovac com vladimir wp-content uploads 2008 03 example jpg  width  200  gt   lt  a gt

User · Answer

Make the image 100  bright so it is clear  And then on Img hover reduce it to whatever brightness you want    x000D   x000D  img   x000D     -webkit-transition  all 1s ease  x000D     -moz-transition  all 1s ease  x000D     -o-transition  all 1s ease  x000D     -ms-transition  all 1s ease  x000D     transition  all 1s ease  x000D    x000D   x000D  img hover   x000D     -webkit-filter  brightness 70    x000D     filter  brightness 70    x000D    x000D   lt img src  http   dummyimage com 300x150 ebebeb 000 jpg  gt  x000D   x000D   x000D    That will do it  Hope that helps

User · Answer

I realise this is a little late but you could add the following to your code  This won t work for transparent pngs though  you d need a cropping mask for that  Which I m now going to see about   outerLink       overflow  hidden      position  relative     outerLink hover after       background   000      content          display  block      height  100       left  0      opacity  0 5      position  absolute      top  0      width  100

[javascript] How to darken an image on mouseover?

Examples related to javascript

Examples related to css