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.
tom___baxter got a reaction from Beyondspace in Image Block: Poster - hover effect not working
