How to add fade effect on mouseover - html

Question

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.