Image Hove is not work in IE - I have problems with the card element

Hello I tried to work with the card element but it doesn’t work. The picture is always cropped. Can you please help me?

Hi @weggemann,

Thank you for reaching out to us. I checked your sites associated with your account and they’re using outdated versions of X and Cornerstone. Please update both X and Cornerstone to the latest versions as many bugs are fixed in the latest releases and see if this resolves the issue You can find the latest version numbers here: (https://theme.co/docs/version-compatibility/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

If the issue persists then please provide the page URL in question so we can take a closer look. Let us know how this goes!

Thank you. I updated X and then Cornerstone.
But if i click on edit with cornerstone now the site is onlyloading and loading and loading …

I tried to deactivate plugins but it did not help.
Plugins activated now are:
UpdraftPlus – Sichern/Wiederherstellen
WP Google Maps
and Cornerstone

Hi @weggemann,

You have several licenses in your account so I am not sure which is the site in question.

Can you please provide us with the admin access to your site in a Secure Note:

Thank you very much. Please see the secure note above

Hi @weggemann,

I tried to login to your site and it looks like it’s working ok now. Images are also good in IE. Can you check it again? If it is still not working, try clearing your browser’s cache or use a different browser.

Thanks

Thanks! I can enter now again with firefox. But how can I make a hover picture which is working in IE?

Hi @weggemann,

The Flip Card Element is not intended to has the flip effect in IE 11 as that browser does not support 3D CSS transitions correctly. We have remove the effect completely from IE 11 and it will not have that 3D effect only the switch.

For the hover effect, it is still an issue with IE browser. Try changing your CSS to this:

.linz:hover::after{
  content: "";
  background-image: url(https://www.therapieziel.at/wp-content/uploads/2020/01/Linz2.jpg);
  z-index:9999;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  right:0;
 background-size:cover;
 display: inline-block;
 height:100%;
}
 .linz:hover img{
   opacity:0;
}

Hope this helps.

Thank you for the code and your help! But the background pictures changes the size now. I attached a picture.

The blue frame shows the size of the original picture.

Hi @weggemann,

I added the code below to force the image wrapper to be confined into the wrapper:

.secondpicture {
  position: relative;
  display:block;
  overflow: hidden;
}

Please kindly consider that this is a mere suggestion to you and might not work exactly as you want. If it does not work you need to find another way to achieve the feature that you like in IE11. It will be a custom coding that you can hire a developer to do so. The given code is not part of our theme features and it was an attempt to help you get started with the custom feature. Custom development is outside of our support scope.

Thank you for your understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.