Hover over an image


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:


Anyone able to help with this?


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? http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance!


Appreciate the reply;


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


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?


Try checking this tickbox:

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