Streaming live at 10am (PST)

How do you connect text to a hover state on a section?


#1

I'm not sure if I'm asking this the right way, but essentially I'm trying to make a text block in a section reveal itself when a person hovers over the whole section.

Here's my site below

https://webflow.com/design/ohrl?preview=9bd423098fd238f82e46b439b11c51d7

This would be in the Team section, so when a user hovers over a person's face i want to make the picture go dark and a text box to pop up with the people's names


#2

I did something similar just recently in one of my templates (http://template-columnism.webflow.com/about-us).

There's different methods you can use to achieve this.

You can use the following method:

  1. Create a row (3, 4, whatever amount columns)
  2. Give a column a class ("team member")
  3. Insert background image (portrait of team member)
  4. Insert a div block with persons name inside this column
  5. Give this div block a class ("team member name") and set opactiy to 0% on default state
  6. Insert text into this div block (team member name)
  7. Select hover state of this div block and set opactiy to 100% Optional you can give
    the div a background color with opacity set to 50%, that way you get a "faded" effect of the person

It's just 1 method... blush


#3

ahh this is perfect thanks @rowan


#4