CODEWITHSUNDEEP
htmlcsswordpressmouseoverfade
Maria Gonçalves
Maria Gonçalves

Reputation: 11

How to add fade effect on mouseover

I'm using this to create a mouseover effect:

<a href="http://glim.pt/produtos/cadeiras">
    <img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"
     onmouseover=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png';"
     onmouseout=" this.src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png';">
    </img>
</a>

But I wanted it to be smoothly, how can I add fade effect? It's for a Wordpress page.

Upvotes: 1

Views: 4301

Answers (4)

Alex Zakruzhetskyi
Alex Zakruzhetskyi

Reputation: 1433

With jQuery:

 $('a').hover(function(){
      $(this).children().fadeOut(100, function(){
        $(this).children().remove();
      });
      $(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png"</img>').hide().fadeIn(2000));
    }, function(){
      $(this).children().fadeOut(100, function(){
        $(this).children().remove();
      });
      $(this).append($('<img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>').hide().fadeIn(2000));
 });
a {
  display: block;
  width: 300px;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#">
  A link
  <img src="http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png"></img>
</a>

Some quick example, but you'll have to fix the issue of the image, that fades in, while the first image fades out. But the post above has much more better solution via css.

Upvotes: 0

Ghost267
Ghost267

Reputation: 1

<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>

If this is what you mean? or what you are looking for? I tried to answer to the best of my ability.

Upvotes: -1

Rion Williams
Rion Williams

Reputation: 76547

You can accomplish this using CSS transitions, if you aren't opposed to it as detailed in this blog post on crossfading images: 

/* A wrapper for your images to transition */
.transition-wrapper {
  position:relative;
  height:300px;
  width:300px;
  margin:0 auto;
}

/* Position each image and apply a transition */
.transition-wrapper img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
  opacity:0;
}

And then simply update your markup accordingly :

<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras"> 
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>

Example

enter image description here

/* A wrapper for your images to transition */
.transition-wrapper {
  position:relative;
  height:300px;
  width:300px;
  margin:0 auto;
}

/* Position each image and apply a transition */
.transition-wrapper img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

/* Automatically hide an image during hover (to reveal the other one) */
.transition-wrapper img:last-of-type:hover {
  opacity:0;
}
<a class='transition-wrapper' href="http://glim.pt/produtos/cadeiras"> 
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_cat2-300x300.png' />
  <img src='http://glim.pt/wp-content/uploads/2017/02/cadeiras_categoria-300x300.png' />
</a>

Upvotes: 3

Collin Herber
Collin Herber

Reputation: 143

Sounds like your going to want to add some javascript to that.

I recommend using the jQuery library. https://jquery.com/

Here you can find a bunch of different fade effects and the documentation http://api.jquery.com/

Upvotes: 0

Related Questions