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
Anyone able to help with this?
Hi @Matty, thanks a lot for nudge Sorry for the delay… this should be fairly straightforward to create
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!
Here’s a quick way to do it:
- Set the person’s image as the background-image of “team div” and set the height to 300px
- Insert another div inside “team div” with the name “team div overlay”
- Set the height of “team div overlay” to 100% and add a black background color
- Add an interaction to “team div overlay” where ‘initial appearance’ -> transparency=0%
- 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 Let me know!
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.