Image Block: Poster - hover effect not working

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.

1 hour ago, tom___baxter said:

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.

 

This is the current state in my browser

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??

On 1/14/2022 at 4:14 PM, tom___baxter said:

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??

Your code is missing. I don't see 2 colors code in your code. Maybe you removed them.

You want

• Initial: Black Overlay/Orange Overlay + White text
• Hover: Hide text + Replace Overlay with images

Is this right?