tom___baxter

Hi, It should appear like the image below, with a dark grey/black block on the left and an orange block on the right before you hover over to reveal the images of coffee and bread. It seems to work randomly - it's currently showing up on my iphone but not on my mac??

Site URL: https://www.small-t.co.uk/ Hi, I adapted some css code so that the image block: poster on my homepage displays two full width blocks of solid colour that change to different images when you hover over them. They worked fine for about a month on all browsers and then suddenly the colour blocks started randomly disappearing. The rollover images work fine still, it's just that the colour blocks sometimes show and sometimes don't. Can anyone figure it out? Any help would be greatly appreciated! div#block-ae619791a3e23ee31a92.sqs-block-image .design-layout-poster a:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; } div#block-ae619791a3e23ee31a92.sqs-block-image .design-layout-poster a:hover:before { background-image: url(https://static1.squarespace.com/static/609a878120adc2458efeba69/t/6192c404ad076e173dd75ca6/1637008390708/COFFEE.jpg); background-size: cover; background-repeat: no-repeat; opacity: 1; transition: all .5s ease-in-out; } div#block-f8aa569c8f52bd814ccd.sqs-block-image .design-layout-poster a:before { content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; } div#block-f8aa569c8f52bd814ccd.sqs-block-image .design-layout-poster a:hover:before { background-image: url(https://static1.squarespace.com/static/609a878120adc2458efeba69/t/6192d5b555d273146f196676/1637012920956/Bread2.jpg); background-size: cover; background-repeat: no-repeat; opacity: 1; transition: all .5s ease-in-out; } See below what it looks like in Squarespace editor compared to how it appears when live in Chrome.