Hello, I would like to do something similar to this one:
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?
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.
Hey @Rodhzz, I’m not sure how exactly you want it for your own site but I got it close.
Change the structure of your elements to, add the Title Div / Heading to the Book1 element:
Set the height of the Title_NaotoFukaswa to 0. And give it
top: 50% for the position.
You will get this:
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.
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.