How do I change the opacity of an image?

Question

<script type="text/javascript">
$(document).ready(function(){
  $('#logo').mouseenter(function() {
    $('#logo').fadeTo("fast",0.3);
  });

  $('#logo').mouseleave(function() {
    $('#logo').fadeTo("fast",1)
  });
});
</script>

I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(

Appears to work fine: http://jsfiddle.net/NuK4G/. Need more context. — Jason P, Feb 26 '14 at 21:03
Please share the HTML part or a jsfiddle. Check the id of your img tag. Is that #logo? — Ritesh A, Feb 26 '14 at 21:10

Wilf · Accepted Answer · 2014-02-26T21:14:11.363

You don't need jQuery for that, you can use CSS:

Example HTML - you need it to have the ID logo.

<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />

CSS

#logo {
    opacity: 1;
    filter:alpha(opacity=100);
    transition: opacity 0.2s linear 0s;
    -webkit-transition: opacity 0.2s linear 0s;
}

#logo:hover {
    opacity: 0.3;
    filter:alpha(opacity=30);
    transition: opacity 0.2s linear 0s;
    -webkit-transition: opacity 0.2s linear 0s;
}

http://jsfiddle.net/pFEdL/2/

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

What does you HTML look like for your image? Is it embedded in other divs?

SO: Jquery mouseenter() vs mouseover()

As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".

edited May 23 '17 at 10:26

Community

1
1

answered Feb 26 '14 at 21:10

Mr. Polywhirl

42,981
12
84
132

How do I change the opacity of an image?

2 Answers2