Streaming live at 10am (PST)

Text appear on column hover


#1

Does anyone know how to create this interaction?

(Link to image below)

I have made the columns no problem that zooms in when you hover and the opacity layer disappears.

My only problem is overlaying the text. I’m fine for the animations on hover but I need the text div to not block the over the other columns when they hover over.

I need the text to show but almost act as an invisible layer.

I’m sure there is a simple solution.

J


#2

Hi @johnPrimal,

There is a way I previously used with custom code :

<style>     
.name-of-your-title-class {
         pointer-events: none;
     }
</style>

You can add that to your page head custom code

I hope it helps :wink:

PS: only works when the site is published as it is custom code


#3

Tried this but the div still blocks the hover effect.

I want the hover interactions to work as normal and I will then change the hide/show interactions for the text.


#4

Could you share you read only link?


#5

https://preview.webflow.com/preview/primal-training-club-new?preview=5b6f4a14f6f770a0026a4cade5c92b9e

its the page called services


#6

Ok easier than I thought.

Add a div inside your service section div (you can call it hover trigger), set it to position absolute and pin to 4 sides and z-index 1 and voilà! :slight_smile:

test-hover


#7

Not sure i’m doing this right Can you share a screenshot of how you set this up.

This is what I have so far.

47


#8

Hey, Could you help me with how you arranged the divs. I’m having trouble with implementing what you suggested. Apologies for being such a noob on this.

J


#9

Just put your hover trigger inside the service section link block (make sure they are set to position relative for the absolute position of the trigger to work).

One trigger in each link block :wink:


#10

I don’t suppose you could show me through the read link? I don’t think Im doing it right.

Thank you for helping me


#11

I would definitely show you some screenshots but I’m away for the moment.
You created the right hover trigger but it should be one inside of each Service-SectionDiv link block instead of only one inside of the ServiceSection wrapper div. (one trigger per item)

Hope it make sens.


#12

Let me know when your back as I’m not sure how to display the text after I have placed the hover trigger inside the ServiceSection.

Many thanks


#13

Hey @johnPrimal,

I’m back, I had a second look at your attempt. Have a look at the following screenshots of the settings I’m using which hopefully will help you setup your project.

It can look tricky but the interaction stay on the link block and the hover trigger is a child of the link block and therefore part of the hovering area.

I hope it will make sens and solve your issue.

Let me know

Max