Is it possible to do?

Publishing help Editor
1

Hello, I would like to do something similar to this one:
https://www.madebysix.com/wp-content/uploads/2015/10/formelry_yes_featured.gif

I have a bunch of images and I want to show a centered text (currently located in a 100vw x 100vh div) when the mouse-overs an image.
My problem is that since these titles are inside a full screen div, I cannot access the images to apply the mouse over because they are behind the div-block with the titles.
Exactly like this GIF above.

Is there a better way to do this?

Thanks

2

Hey @Rodhzz, you should be able to achieve this without using a full screen div for the Title. Your title and Images’ container can be on the same level. Apply absolute position on the images’ container and use Flex settings to center the Title.

You can share the read-only link for me/others to check out your setup now and see what we can change.

3

Hello @dennyhartanto, I’ve tried it but it didn’t work.
Here is the read-only link:

https://preview.webflow.com/preview/books-i-love-2faf27626a9e5ea172b186d3a0?utm_medium=preview_link&utm_source=designer&utm_content=books-i-love-2faf27626a9e5ea172b186d3a0&preview=1b3a4fedec84d64e7c9415d2de86a93f&mode=preview

I hope you can help me.
The ‘Naoto Fukasawa Embodiment’ text is what I want to show when you hover the mouse over the picture number 1.

Thanks.

4

Hey @Rodhzz, I’m not sure how exactly you want it for your own site but I got it close.

  1. Change the structure of your elements to, add the Title Div / Heading to the Book1 element:
    Screen Shot 2020-05-08 at 03.04.49

  2. Set the height of the Title_NaotoFukaswa to 0. And give it top: 50% for the position.

    Screen Shot 2020-05-08 at 03.08.39
    Screen Shot 2020-05-08 at 03.08.39241×792 22.6 KB

You will get this:

5

It worked properly! Thank you so much for this, you have no idea about how useful your help was.
Quick question: Do I really need to have it inside the image div? I tested as a separate div outside and worked properly too.

Thank you,
Rodolpho

6

Hey @Rodhzz, no problem! On my test, when it is outside the div the text flickers on hover because it is conflicting with the animation.