Larkin Posted March 29, 2021 Share Posted March 29, 2021 I've coded poster images to flip to show the description when scrolled over. It looks really good on chrome but safari makes it all glitchy. Is this something I can fix? Any advice? Sorry, I can't put the url because the website isn't live yet but here is the code I'm using. .design-layout-poster img{ transition: 1s} .design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} .image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;} .design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s;} Chele 1 Link to comment
WillMyers Posted March 29, 2021 Share Posted March 29, 2021 Hey Larkin, gotta move that overlay with the image. .design-layout-poster img, .design-layout-poster .image-overlay{ transition: 1s } .design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{ transform: rotateY(180deg); transition: 1s } .image-card-wrapper{ transform:rotateY(180deg)!important; opacity:0; transition: 1s; } .design-layout-poster:hover .image-card-wrapper { opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s; } Does that do it? tuanphan 1 Hey-o, my name is Will and I help Squarespace designers and developers with technical things. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - although I'm only an expert in 2 of these. Check out my plugin store or sign up for my newsletter. Link to comment
michaelpga Posted December 1, 2021 Share Posted December 1, 2021 On 3/30/2021 at 10:44 AM, WillMyers said: Hey Larkin, gotta move that overlay with the image. .design-layout-poster img, .design-layout-poster .image-overlay{ transition: 1s } .design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{ transform: rotateY(180deg); transition: 1s } .image-card-wrapper{ transform:rotateY(180deg)!important; opacity:0; transition: 1s; } .design-layout-poster:hover .image-card-wrapper { opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s; } Does that do it? Hey @WillMyers I'm having the same issue with this glitch on the Safari browser and iPhone. Unfortunately your code didn't work either. Do you have any other suggestions? Thank you! Link to comment
WillMyers Posted December 1, 2021 Share Posted December 1, 2021 15 minutes ago, michaelpga said: Hey @WillMyers I'm having the same issue with this glitch on the Safari browser and iPhone. Unfortunately your code didn't work either. Do you have any other suggestions? Thank you! Can you share a link to the site you're trying to do this on? Hey-o, my name is Will and I help Squarespace designers and developers with technical things. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - although I'm only an expert in 2 of these. Check out my plugin store or sign up for my newsletter. Link to comment
michaelpga Posted December 1, 2021 Share Posted December 1, 2021 2 minutes ago, WillMyers said: Can you share a link to the site you're trying to do this on? Sure @WillMyers it is www.ridgemontpartners.com.au Thank you!!! Link to comment
WillMyers Posted December 1, 2021 Share Posted December 1, 2021 42 minutes ago, michaelpga said: Sure @WillMyers it is www.ridgemontpartners.com.au Thank you!!! Ok Try this bit of code instead. You will probably want to change the background from black. /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .design-layout-poster:hover { transform: rotateY(180deg); } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ } Hey-o, my name is Will and I help Squarespace designers and developers with technical things. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - although I'm only an expert in 2 of these. Check out my plugin store or sign up for my newsletter. Link to comment
michaelpga Posted December 1, 2021 Share Posted December 1, 2021 11 minutes ago, WillMyers said: Ok Try this bit of code instead. You will probably want to change the background from black. /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .design-layout-poster:hover { transform: rotateY(180deg); } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ } Hey @WillMyers - hmmm this code seems to work on Chrome but not on Safari again, it is still glitching? Any advice is so much appreciated, thank you kindly 🙂 Link to comment
WillMyers Posted December 1, 2021 Share Posted December 1, 2021 What aboutttttt This? /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .image-block:hover .design-layout-poster { transform: rotateY(180deg); } .design-layout-poster .intrinsic{ z-index:0; } .design-layout-poster figcaption{ z-index:1; } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ } Chele and creedon 1 1 Hey-o, my name is Will and I help Squarespace designers and developers with technical things. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - although I'm only an expert in 2 of these. Check out my plugin store or sign up for my newsletter. Link to comment
michaelpga Posted December 1, 2021 Share Posted December 1, 2021 41 minutes ago, WillMyers said: What aboutttttt This? /*Card Flip Effect*/ .image-block .sqs-block-content{ perspective: 2000px; } .design-layout-poster { position: relative; transition: transform 0.8s; transform-style: preserve-3d; perspective: 1000px; } .image-block:hover .design-layout-poster { transform: rotateY(180deg); } .design-layout-poster .intrinsic{ z-index:0; } .design-layout-poster figcaption{ z-index:1; } .design-layout-poster .intrinsic, .design-layout-poster figcaption{ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .design-layout-poster figcaption{ transform: rotateY(180deg); background:black; /*Add if Needed*/ /*border-radius: 20px;*/ } Oh my gosh, I think that worked! I have checked on both Chrome and Safari browsers, just confirming with the iPhone now. Thank you so much @WillMyers !! Link to comment
WillMyers Posted December 1, 2021 Share Posted December 1, 2021 12 hours ago, michaelpga said: Oh my gosh, I think that worked! I have checked on both Chrome and Safari browsers, just confirming with the iPhone now. Thank you so much @WillMyers !! Huzzah! Hey-o, my name is Will and I help Squarespace designers and developers with technical things. I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life - although I'm only an expert in 2 of these. Check out my plugin store or sign up for my newsletter. Link to comment
michaelpga Posted December 2, 2021 Share Posted December 2, 2021 7 hours ago, WillMyers said: Huzzah! It's worked perfectly on all devices and browsers, you're amazing! creedon 1 Link to comment
Chele Posted December 15, 2021 Share Posted December 15, 2021 You are a genius @WillMyers! Thank you!! WillMyers 1 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