Jump to content

Image Card Flip on Hover Glitch

Recommended Posts

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!

 

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...
  • 1 month later...
  • 4 weeks later...

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;}
  }
}

Link to comment
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;
}
}}

 

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

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

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

Screen Shot 2022-01-02 at 10.13.32 AM.png

Link to comment
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;
}
}}

 

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

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.