Image Rollover Swap

Site URL: https://agicreative.com/info/team

Site Password: password

I have some simple HTML code inserted into my site to swap images when you rollover our team. It goes from a static jpg to a gif. Wondering if there is a way to do this via CSS instead that is a little smoother and maybe loads a little faster? Overall, just wondering if there is a better way to do this. 

Here is the code I am using on each team member:

<a href="https://www.agicreative.com/info/team/chrismathews">
<img src="https://agiphoto.com/_team_portraits/jpegs/BW/Chris.jpg" 
onmouseover="this.src='https://agiphoto.com/_team_portraits/gifs/Chris.gif'"
onmouseout="this.src='https://agiphoto.com/_team_portraits/jpegs/BW/Chris.jpg'"></a>
<h2><small>Chris Mathews</small></h2>
<h3><small>President / Photographer</small></h3>

Add Image Block then share url again. You can use CSS to change image on hover, you can set transition...

1 hour ago, tuanphan said:

Add Image Block then share url again. You can use CSS to change image on hover, you can set transition...

Thanks for looking into this, I added an image block above "Chris Mathews"

6 hours ago, cmography said:

Thanks for looking into this, I added an image block above "Chris Mathews"

Can you add an example image?

1 minute ago, tuanphan said:

Can you add an example image?

Done! Sorry about that. I added an image block with an image.

33 minutes ago, cmography said:

Done! Sorry about that. I added an image block with an image.

sory, forgot, can you add image (you did) + link to image block? so I can give exactly code

(with link - without link, code will be different)

2 minutes ago, tuanphan said:

sory, forgot, can you add image (you did) + link to image block? so I can give exactly code

(with link - without link, code will be different)

Sorry, not sure I understand what you mean by link to image block?

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1583010095304_55435 .image-block-wrapper:hover img {
    visibility: hidden;
	transition: all 0.5s;
}
div#block-yui_3_17_2_1_1583010095304_55435 .image-block-wrapper:hover {
    background-image: url(https://agiphoto.com/_team_portraits/gifs/Dan.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
div#block-yui_3_17_2_1_1583010095304_55435 .image-block-wrapper img {
    transition: all 0.5s;
}

On 2/29/2020 at 6:57 PM, tuanphan said:

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1583010095304_55435 .image-block-wrapper:hover img {
    visibility: hidden;
	transition: all 0.5s;
}
div#block-yui_3_17_2_1_1583010095304_55435 .image-block-wrapper:hover {
    background-image: url(https://agiphoto.com/_team_portraits/gifs/Dan.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
div#block-yui_3_17_2_1_1583010095304_55435 .image-block-wrapper img {
    transition: all 0.5s;
}

 

Do you know of any way to make these fade? There are instantaneous right now, but a slight fade might be nice as a transition.

div#block-yui_3_17_2_1_1583020764195_47717 .image-block-wrapper:hover img {
    visibility: hidden;
	opacity: 0;
}
div#block-yui_3_17_2_1_1583020764195_47717 .image-block-wrapper:hover {
    background-image: url(https://agiphoto.com/_team_portraits/gifs/Dan.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
div#block-yui_3_17_2_1_1583020764195_47717 .image-block-wrapper img {
     transition: opacity 1s ease-in-out;
}

use above code

5 hours ago, tuanphan said:

div#block-yui_3_17_2_1_1583020764195_47717 .image-block-wrapper:hover img {
    visibility: hidden;
	opacity: 0;
}
div#block-yui_3_17_2_1_1583020764195_47717 .image-block-wrapper:hover {
    background-image: url(https://agiphoto.com/_team_portraits/gifs/Dan.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
div#block-yui_3_17_2_1_1583020764195_47717 .image-block-wrapper img {
     transition: opacity 1s ease-in-out;
}

use above code

This is getting closer, but still not right. Now it fade when I mouse out, but it doesn't fade from the jpg to the gif.