▼
Streaming live at 10am (PST)

Overlay not working as I'd like, Please help

Design help General
#1

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
Anton

Screen Shot 2020-10-19 at 5.04.06 PM
Screen Shot 2020-10-19 at 5.04.06 PM874×714 99.5 KB

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

1 Like
#2

Hello @ParagonTwo

Is this what you are trying to achieve > https://www.loom.com/share/5033988341074e3c9b7d6c4e539b6be3

:webflow_heart:

1 Like
#3

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

Rollover
Rollover1424×1012 124 KB

1 Like
#4

Hey,

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

Screenshot_4
Screenshot_41919×954 316 KB

#5

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.

#6

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:

#7

Hi @ParagonTwo

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

:webflow_heart:

#8

Hi Piter,

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

Cheers
Anton