Attached are the two screenshots. The first is what the ‘school images’ looks like in the preview and the second is what they look like when I published the site. Is this definitely a bug or could it be something else? I checked the elements and they are the same as the rest.
Hi @mrsnewbie, thanks for your patience. I checked the site and looked at the site design and in the published mode, and the styling looks the same to me:
I believe the issue may be in the structure, how this elements are setup on the page.
It looks like you are using columns with a link block set to be absolutely positioned over the column and image. Since the link block is absolutely positioned and the image is not, the images are resizing as the white space increases or decreases, but the resizing is uneven.
I would highly recommend to change this to put the image inside the link block which will cause the image and link block to resize evenly.
I hope this helps, let me know if you have any questions.
My best guess was to create a div overlay that’s hidden until I hover over the block. However, the problem I encountered with that is, in order to do that I need to position it as relative but when the image resizes, the div overlay won’t resize with it. I apologize in advance if my explanation is confusing.
Can you instruct me on how best to accomplish the hover effect on the squarespace page?