tom___baxter Posted January 10, 2022 Share Posted January 10, 2022 (edited) 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. Edited January 10, 2022 by tom___baxter Beyondspace 1 Link to comment
Beyondspace Posted January 10, 2022 Share Posted January 10, 2022 (edited) 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 hover effect.mp4 Is it different from your requirement? Edited January 10, 2022 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, Lightbox Studio pluginIf 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
tom___baxter Posted January 14, 2022 Author Share Posted January 14, 2022 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?? Link to comment
tuanphan Posted January 15, 2022 Share Posted January 15, 2022 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? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment