Hover over an image

Hello,

I plan to add a staff section to 1 of my websites, I want to create it so when you hover over the staff photo a black overlay will come down over the picture with some information about that staff member.

I fount a thread a while ago which @PixelGeek gave a tutorial, but I cant find it again.

Any help how I could do this will be appreciated :smile:

Matt

Anyone able to help with this?

Matt

Hi @Matty, thanks a lot for nudge :wink: Sorry for the delay… this should be fairly straightforward to create :smile:

Could you help to share the read-only link to the site and a screenshot showing the page and location of the staff photo? Share a read-only link | Webflow University

Thanks in advance!

@cyberdave

Appreciate the reply;

https://preview.webflow.com/preview/hairb-4ebdf8acd6e7c69480e96a24b96ea7fe?preview=bf399ebb2ad868bc5cc7e1941cde7b0f

The staff photos are linked to the tab “Meet the team”, you will see 4 pictures the same.

Cheers

Here’s a quick way to do it:

  1. Set the person’s image as the background-image of “team div” and set the height to 300px
  2. Insert another div inside “team div” with the name “team div overlay”
  3. Set the height of “team div overlay” to 100% and add a black background color
  4. Add an interaction to “team div overlay” where ‘initial appearance’ → transparency=0%
  5. Add an interaction to “team div” with ‘affect other element’ → “team div overlay” where transparency=100% on ‘hover over’ and transparency=0% on ‘hover out’

This should work :smile: Let me know!

1 Like

@kasperkazzual @cyberdave

Thanks! I think Its working ok, although I want that effect to be on all of the staff images, but when I hover over any of the staff images they have the hover div even if I’m not hovered over that specific staff image. To fix this would I simply need to create a new div e.g staff1 overlay, staff 2 overlay ect ect?

Cheers

Try checking this tickbox:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.