Image Card Flip on Hover Glitch

Site URL: https://www.vintagetimbers.net

Hello,

I did some coding for my image cards on the homepage to rotate on hover using the code:

/*roatating image on hover*/
.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: #3E4450; 
  transition: 1s;
}

But for some reason on Chrome it works perfectly and on Safari it glitches out. Does anyone have an answer/suggestions to fix this problem?

The site is www.vintagetimbers.net

and the password is vintagetimbers

Thanks so much!

Hi,

What is problem? Can you explain in more detaill?

10 hours ago, tuanphan said:

What is problem? Can you explain in more detaill?

On Chrome.

On Safari.

Apparently this is a know issue on Safari. There were several workarounds but no one solution. I quickly tried several of the "fixes" with no success.

If anyone finds a fix for this I would be so grateful!

Please see the following.

Hi @tuanphan @creedon

I currently have the image as poster blocks and when hovered, it flips over to text image card.

Obviously this isn't good design for mobile. I'm wondering if there is there a way to switch eliminate this and have the image stacked on top of text like how it would normally?

Home page: https://violin-salmon-ljp3.squarespace.com/ (pass: massage)

This is what I have right now in CSS

/*Rollover images ICA*/
section[data-section-id="61c2418ff128ce7319b1cb48"] {
@media only screen and (min-width:640px){

.design-layout-poster img{ transition: 1s}

.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1.5s} 

.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1.5s;}

.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: gray; transition: 1.5s;}
  }
}

On 12/30/2021 at 12:50 AM, jesswp said:

Hi @tuanphan @creedon

I currently have the image as poster blocks and when hovered, it flips over to text image card.

Obviously this isn't good design for mobile. I'm wondering if there is there a way to switch eliminate this and have the image stacked on top of text like how it would normally?

Home page: https://violin-salmon-ljp3.squarespace.com/ (pass: massage)

This is what I have right now in CSS

/*Rollover images ICA*/
section[data-section-id="61c2418ff128ce7319b1cb48"] {
@media only screen and (min-width:640px){

.design-layout-poster img{ transition: 1s}

.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1.5s} 

.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1.5s;}

.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: gray; transition: 1.5s;}
  }
}

Screen Recording 2021-12-29 at 12.48.59 PM.mov

Don't remove/edit any code. Add this to Design > Custom CSS

/* Mobile Flip Card */
@media screen and (max-width:1024px) {
div#page-section-61c2418ff128ce7319b1cb48 {
.design-layout-poster figcaption.image-card-wrapper {
    opacity: 1 !important;
}
.intrinsic {
    width: 100% !important;
}
}}

16 hours ago, tuanphan said:

Don't remove/edit any code. Add this to Design > Custom CSS

/* Mobile Flip Card */
@media screen and (max-width:1024px) {
div#page-section-61c2418ff128ce7319b1cb48 {
.design-layout-poster figcaption.image-card-wrapper {
    opacity: 1 !important;
}
.intrinsic {
    width: 100% !important;
}
}}

 

Hey @tuanphan, thank you. It ended up looking like this with backward text displaying on the image ...

Is it possible to just have the images showing, no flip? I think that'll be easier and more user friendly on mobile/tablet.

Thanks!

9 hours ago, jesswp said:

Hey @tuanphan, thank you. It ended up looking like this with backward text displaying on the image ...

Is it possible to just have the images showing, no flip? I think that'll be easier and more user friendly on mobile/tablet.

Thanks!

Screen Recording 2022-01-01 at 7.38.15 PM.mov

You mean: Show title under image + Hide description?

5 hours ago, tuanphan said:

You mean: Show title under image + Hide description?

@tuanphan 

I am using a text block to showcase the title so those are already showing on mobile (see image). The poster image block isn't showing at all on mobile - wondering if it's possible to show just the image, no description or roll-over flip.

On 1/2/2022 at 7:39 AM, jesswp said:

Hey @tuanphan, thank you. It ended up looking like this with backward text displaying on the image ...

Is it possible to just have the images showing, no flip? I think that'll be easier and more user friendly on mobile/tablet.

Thanks!

Screen Recording 2022-01-01 at 7.38.15 PM.mov

change number 1 to 0, it should be

/* Mobile Flip Card */
@media screen and (max-width:1024px) {
div#page-section-61c2418ff128ce7319b1cb48 {
.design-layout-poster figcaption.image-card-wrapper {
    opacity: 0 !important;
}
.intrinsic {
    width: 100% !important;
}
}}

On 1/4/2022 at 2:45 AM, tuanphan said:

change number 1 to 0, it should be

/* Mobile Flip Card */
@media screen and (max-width:1024px) {
div#page-section-61c2418ff128ce7319b1cb48 {
.design-layout-poster figcaption.image-card-wrapper {
    opacity: 0 !important;
}
.intrinsic {
    width: 100% !important;
}
}}

 

THANK YOU!!!!! @tuanphan that worked perfectly.