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.
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’
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?