how to make a transparent image in jQuery?

Question

I want to make the A image transparently when the mouse pointer is over the B image so that I can see either image.

How should I change this?

Answer 1

You can use CSS opacity property to make image transparent

$("img").bind("mouseover", function() {
  $("img").css("opacity", "0.5");
  $(this).css("opacity", "1");
});

Here is link to JSFiddle: https://jsfiddle.net/8hbmyu9k/2/

Answer 2

You can change the opacity value of image on the hover event of image B.

img.transparent
{
   opacity: 0.3; filter: alpha(opacity=30); /* For IE 8 & 9 (more valid) */
}

Now at the hover event of image B (img tag with class B)

$("img.B").hover(function(){
   $("img.A").addClass("transparent");    
},function(){
   $("img.A").removeClass("transparent");    
});

Answer 3

If you are having trouble with posting code here, read this . Make sure you include this with any jQuery code you use:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

This demo is simplified to show some possibilities.

• jQuery has a number of mouse events (see image B)

• Using .css() , you can change properties like:

  • display

  • visibility (see image A)

  • opacity

• You can use the jQuery methods hide() and show() (see image C)

• Or try assigning a class to the targeted element with a property mentioned previously, then use addClass and removeClass (see image D)

Snippet

 $(function() { $('.B').mouseover(function() { $('.A').css('visibility', 'hidden'); $('.C').hide(); $('.D').addClass('invisible'); }); $('.B').mouseleave(function() { $('.A').css('visibility', 'visible'); $('.C').show(); $('.D').removeClass('invisible'); }); }); 

 .invisible { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://placehold.it/100x100/000/fff?text=A" class="A"> <img src="http://placehold.it/100x100/00e/fc1?text=B" class="B"> <img src="http://placehold.it/100x100/fc1/00e?text=C" class="C"> <img src="http://placehold.it/100x100/e0e/fcf?text=D" class="D">