Play Button interaction

[Jordanpuga]

Hi there,

I’m trying to create a play button (triangle) out of a lightbox div. I’ve managed to create a triangle that comes down to the center of the parent element when you hover over the parent div. However, the interaction is flawed bc as soon as you hover over the triangle the overlay interaction fades away.

I’d like for the interaction to stay in place as i hover over the triangle i created.

---

Here is my public share link: melissa-vera.webflow.io

https://preview.webflow.com/preview/melissa-vera?preview=1fb1ea108b816441d3b9c22a1eccc19e

[Waldo (Waldo Broodrÿk)]

Hi @Jordanpuga excellent question!

It looks like your interaction is setup on the “Text Block New” element.

Try adding the interaction instead to your “1” parent element and change the interaction settings to “Limited to nested elements” instead.

And maybe consider setting your triangle play lightbox link to 100% width/height in absolute position, and use flexbox styles to center the triangle image veritically and horizontally as done here: https://flexbox.webflow.com/#verticalcenter