Streaming live at 10am (PST)

Overlay not working as I'd like, Please help

Hi everyone,

I’m hoping someone could help me. I’m having trouble with a rollover. I have images in a Grid, where I have a Colour Overlay as a Hover state with Words. I’m having trouble entering the words in the dead centre of image and seems to be creating a weird space at top. I’m sure this is probably an easy fix for someone who knows what they are doing, It’s driving me insane. It is on the Work Page.

Thanks in advance

Here is my site Read-Only: [LINK][1]

1 Like

Hello @ParagonTwo

Is this what you are trying to achieve >


1 Like

This is what I’m trying to Achieve (Text centred and gold overlay 100% of image width and height)…

1 Like


I think I fixed your problem :slight_smile:

  • Set the covering div block to “position: relative”
  • Set the text block to “position: absolute”
  • Set the covering div block to “display: flex” and align & justify the content to center

Thank heaps for helping. The only thing now is the words are either constantly there and when I change original state not to view (eye with line through it) and the hover state to view, that doesn’t work. Do I need to do an interaction to get this to work correctly? Bascially, I want the words to come up with the overlay when I hover over it.

Ah, yea you should probably do that with an mouse hover interaction where the text is animated from 0 opacity to 1 or something similar :slight_smile:

Hi @ParagonTwo

Check the video. I did just that with interactions sowing the overlay and text on hover


Hi Piter,

Thank you very, very very (did I say very) much. This is fantastic and thanks for the video (perfect). Works perfectly.