How to add fade effect on mouseover

416
February 06, 2017, at 11:00 PM

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.

Answer 1

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

/* 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>

Answer 2

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/

Answer 3

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.

Answer 4
<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.

Rent Charter Buses Company
READ ALSO
Displaying two records per page MVC using a page break CSS

Displaying two records per page MVC using a page break CSS

I am returning a list in a MVC pageThe list can have many records

318
NativeScript border-redius for UI element is not working

NativeScript border-redius for UI element is not working

I am using the VS telerik extension to develop my mobile applicationHowever, I am trying to curve the borders of my UI elements by using CSS border-radius:3px-52px and it is not working

499
use delimiter within ngTable cells

use delimiter within ngTable cells

I'm currently using ngTable to build a table that shows a list of emailI would like to use semi-colon as a delimiter to create a new row for every email inside the cell

292
Alternative to Clip-Path with universal browser support?

Alternative to Clip-Path with universal browser support?

I've used a few clip-path polygon shapes to create downward pointing content boxes on my site, you can see a few examples on the home page here: http://5509f2

595