Streaming live at 10am (PST)

Show different photos on regular and hover state


#1

I would like to set a photo so that when you hover over it, a different photo shows. I’ve tried using link blocks, but can’t figure out how to make that work. (This is specifically on the “Team” page.)

You can see how I want it to work on a test site from another platform here: https://sdg785.wixsite.com/sdgarch/team

It’s also frustrating that the link block doesn’t size to a background photo and that there doesn’t seem to be a way to set an aspect ratio for a link block (or image or div block) so that all images can display at the same aspect ratio.


Here is my site Read-Only: https://preview.webflow.com/preview/ashleys-first-project-825c72?utm_source=ashleys-first-project-825c72&preview=85c879d117521a01b82175538c4adec5

Published Site: http://ashleys-first-project-825c72.webflow.io/team


#2

Just use background image for this purpose :wink: You may set different images for hover states.


#3

@dram That is what I did. And as you can see, with only a background image, the link block disappears completely and won’t show at all.


#4

Sure, since the div is empty. You have to provide some kind of sizing to the div with background image for it to be visible.

edit: I mean not only width but height also.


#5

Thanks @dram ! So, div (with height and width) and link block with different background images for different states. So far so good, but now how to individualize?

I’m assuming the way to get different photos for each instance (photos of Ali for Ali, photos of Beth for Beth, etc) is to create combo classes, but that doesn’t seem to be working.


#6

Here you go.


#7

Ok, I can do that for the “none” state. But when I try to do it for the “hover” state… that overrides the background photo for “none” and the “hover” photo always shows.


#8

hi there, I have made a video for you:
CloudApp

Hope this helps :slight_smile: