Jump to content

Image Rollover Swap

Recommended Posts

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>

 

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

6 hours ago, cmography said:

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

Can you add an example image?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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;
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Edited by cmography
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.