Jump to content

Image Block: Poster - hover effect not working

Recommended Posts

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.

 

How it looks in squarespace editor.png

what it looks like in chrome.png

Edited by tom___baxter
Link to comment
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.

 

How it looks in squarespace editor.png

what it looks like in chrome.png

This is the current state in my browser

 Is it different from your requirement? Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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??

Screenshot 2022-01-14 at 09.09.39.png

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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.