Add an effect with a css change (JQuery)

Question

I have an image, and when I hover it, the image disappear and the text is displayed. But I want to add an effect like fadeIn() but it doesn't work.

I have this code :

$('.gridImage').hover(function(){
   $(this).find("img").css("visibility","hidden");
}, function(){
    $(this).find("img").css("visibility","visible");
});

I tried with $(this).find("img").css("visibility","hidden").fadeIn(1000); but it doesn't work. Can someone help me please ?

EDIT :

    <div class="col-md-15 col-lg-15 col-sm-4 col-xs-12 gridImage">
        <img src="images/bonheur.jpg" class="img-responsive gridImage couple1" id="">
        <div class="projet text-uppercase">Voir le projet</div>
    </div>

Rory McCrossan · Accepted Answer · 2015-12-16 18:18:20Z

2

Setting the visibility in CSS means that the image will instantly become invisible. Use fadeIn() and fadeOut() by themselves instead:

$('.gridImage').hover(function(){
   $(this).find("img").fadeOut()
}, function(){
    $(this).find("img").fadeIn()
});

Or simply just fadeToggle() under both events:

$('.gridImage').hover(function(){
   $(this).find("img").fadeToggle()
});

Also note that you can do this in CSS alone without the need for any JS code:

.gridImage img {
    transition: opacity 0.5s;
}
.gridImage:hover img {
    opacity: 0;
}

edited Dec 16, 2015 at 18:18

answered Dec 16, 2015 at 18:15

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramiz Wachtler · Accepted Answer · 2015-12-16 18:25:26Z

0

fadeIn() is already animating from display: none to display: inline (in this case, because it's a <span>) , if you want to animate visibility, use animate()

Here a simple demo with fadeIn() and fadeOut()

$('.gridImage').hover(function() {

  $(this).children("img").fadeOut(1000, function() {
    $(this).siblings("span").fadeIn(1000);
  });
});

span.text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gridImage">
  <img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" />
  <span class="text">THIS IS GRUMPY CAT!</span>
</div>

edited Dec 16, 2015 at 18:25

answered Dec 16, 2015 at 18:16

Ramiz Wachtler

5,6932 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Add an effect with a css change (JQuery)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related