Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Image Card Flip on Hover Glitch


Siennasocialstudio

Question

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

4 answers to this question

Recommended Posts

  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...