I am trying to achieve text on rollover using Squarespace 7.1. I am quite new at this, but I have had quite a few attempts before asking. I am hoping there is a simple solution.
So far I have created a grid of images that I would like to reveal project title, description, etc. when rolled over. The images need to maintain a link so that they can be clicked on in the rolled over state. I have tried multiple approaches -
1. The InsidetheSquare solution. I have dismissed as it isolates the link to only the text box. (https://insidethesquare.co/squarespace-tutorials/reveal-text-hover-fluid)
2. I then tried the approach of adding a base image (opacity 100%), placing text box over that with semi-opaque background, then placing replica image over the top that would fade to 0% on rollover. This almost got me there, but I noticed that the stack of images/text does not load in the right order due to the scrolling fade animation (which I would like to keep).
3. Latest attempt - I created a replica of the image with a white wash over it. Over that I have placed the text. Over that I have placed the main image at 100% opacity, which fades back to 0% on rollover. This reveals the text as expected. However, again, the text loads before the image on animated scroll and on refresh.
Unless someone has a better way to achieve it, I was hoping to find out if there is a way that I can link the opacity of the text to the rollover state of the image in CSS. That way the text would only become opaque during rollover, as the foreground image fades.