I wanted to have an image that fits the full width of the screen that sizes down depending on the screen size and that has text appear through the hover feature, but I cant seem to figure it out.
I created a Section then created a Div block which included the image I wanted. I then wanted a link block to cover the whole size of the image, so the user can click on the image and they would be redirected to the next page. When the mouse is over the image/link block I wanted text to appear in the center of the image by using the hover future.
Start by dropping in a link block. Give it a width of 100%. Set it’s position to “relative”.
Drop your image inside of this link block and tell the image to be 100% width. Set the image position to “absolute”.
Drop a new div inside of the link block. Give it a width of 100% and height 100%. Set this div’s position to “absolute”. Give this div a new z-index of 1 (or any number higher than your image’s z-index). I usually give this overlaying div a color just so I can see what I’m working with. Set this div to have a display of “flexbox” and set to center horizontal and center vertical.
Drop your text inside of this flexbox.
Give the flex box an opacity setting of 0%
Give the flexbox a hover state and tell it to change the opacity to 100%.
On the initial state for the element, you can set the transition/speed of the opacity when hovering.
Keep in mind that if your image is filling the browser 100%, most users will have their cursor over the image and may not realize it is a link. The feature you’re describing might work better if you’re applying it to a smaller image/link.
Thank you so much for all your help! Your suggestions have worked and make sense. You are also right about having this feature work better on a smaller image/link. Would you recommend shrinking the Width size of the the link box from 100% down to 90% or even smaller? Also if I was to shrink the link box, how do I make sure the link is in the center of the page?
In reference to @Port_of_Folio post above. Make the first div height and width 100% or 100vh and 100vw then set the div to flex box and check both center buttons. This will however stop any interaction with anything underneath the floating div as it will cover the rest of your site.
Sizing is subjective. I’d just play around with it and have some outside users experience it and give feedback.
Few ways to center the link block. You can place it inside of another div that has centering applied using center formatting in the text area or apply flexbox>centering
Or you can tell the link block itself to “center” in the position dialog box (see attachment)
