Hover over effects - Zooming in image and letters appearing troubleshooting

I am currently trying to achieve a zooming in effect while hovering over an image while at the same time a text will also appear. Any suggestions? 

.sqs-block-image-link:hover {transform: scale(1.1); transition: .4s;}

@media only screen and (min-width: 640px){
#block-yui_3_17_2_1_1690813603606_5613{
opacity: 0;
 transition: opacity 1s
}
#block-yui_3_17_2_1_1690813603606_5613:hover {
opacity: 1;
transition: opacity 1s
  }
}

The first line handles the zooming in effect, while the rest of the code is about the text visibility while hovering over it.

Hi,

Can you share link to page? We can check easier

Thanks for the reply,

The page is currently unpublished and still under construction so I have made her available through password for you to see it as it's the only option Squarespace gives me. So this is the link, https://rose-bugle-hsrk.squarespace.com/projects/project-one, and password is 123. There you will see a small image of a marble and when you hover over it you will see letters appearing. Have in mind that later on the same image with letters will be linked to another page on my website!

Hi,

No way to do this. If you inspect element, you will see Image Block HTML tag above Text Block HTML tag. We can only target the element below the Text Block, but it is difficult to target the element above it.

You can consider using Classic Editor Image Block (it has some options to achieve text appear on overlay, then we can use additional CSS to make zoom effect). Or you can also use Gallery Section.

If you need a guide, I will do a quick video/or quick guide