CMS Team Image Swap on Hover

Hi,

I would like for the team photo to switch to a fun photo on hover but cannot figure out how to achieve this. Can anyone help assist?

Here is the read only link. Please excuse the messy site - I am very new here and still learning Webflow :slight_smile:

Thank you!


Here is my public share link: https://preview.webflow.com/preview/we-collab?utm_medium=preview_link&utm_source=designer&utm_content=we-collab&preview=e840238bf6907f9ff081810915b498a5&pageId=623cc35af0c494c4dcd3a61d&workflow=preview

Hi @ashleyjones

There’s a few ways to do it, but I would use interactions so you do repeat steps. Would you prefer I type the steps here or post a short video to follow?

Hi @garymichael1313 – Whatever is easiest / quickest for you! Maybe a quick video? Thank you so much for helping!

Here’s a quick video:

I just used a div in which you could place an image inside. I might do that way because photos can have different sizes, etc. If you plan on using CMS, then use an image element. Either way would work. Also add the border radius to the parent div so all the photos don’t need adjusting. At the end, add Opacity: 0, so you don’t get that flickering flash of the image on page load.

Hope this works for ya :slight_smile:
-G.J.

@garymichael1313 Thank you! I am planning on using CMS so it sounds like an image element might be the way to go. Do I grab a normal image element to add in? I added a second image field in the CMS but don’t think I can access it.

If div will work, I’ll just follow this model but figured I’d ask!

Yeah if you use CMS then you have to get that image from the database. But that will increase your page limit, because you get 20 collections per page. If that limit is not a problem, then use CMS and you can update photos dynamically. However, you may run into issues if you keep developing the page.

Consider using the asset panel because how many alternative photos can a work bio have. Just make one comic photo and that’s it. If you do anything else with their bio, you can always use the same image. I don’t think it will affect their bio. Also, this will work for any other pages, by keeping the funny photo consistent. Just a thought.

I think you know what’s best. By the way, the site is FABULOUS! I love the design, typography and flow. It’s a really, really good site!

-G.J.

OH by the way. Make sure you insert breadcrumbs on the pages using the CMS, so visitors won’t always need the back button. That’s the only tid-bit I would add.

See ya!