Search code examples
jqueryhtmlcsshoverfadeto

jQuery - reduce opacity of image on mouseover

What I want to achieve is that when you hover your mouse over an image its opacity will reduce to the half. I must be doing an obvious mistake here but can't figure out what exactly. Any tip would be appreciated.

http://jsfiddle.net/bUHVc/1/

   <a href="#" id="right-button"><img class="arrow" src="http://placekitten.com/200/200" alt="right" /></a>

 $('.arrow').hover(
function() {
     $(this).find('img').fadeTo('slow', 0.5);
},
function() {
     $(this).find('img').fadeTo('slow', 1);
 }
);
Solution

  • A nicer solution would be to do it in simple CSS, without adding any javascript, so you can just add a class and do it with all your images, something like:

    .arrow:hover {
  opacity: 0.5;
}

    and if you want the slow transition you can just look at here to customize the effect.