Hover images problem

I have a problem. I have 3000 products in my Basel store, and all my images are transparent PNG. When im hovering in category view this happens:

https://gyazo.com/6c0b342f4c6d92e7de34be7eafa703d0

1. i need to add white background to second image. 2. placement of hover image is different.

Please help me fix.

Note: I havent updated the theme to newest version, but i intend to do so.. So can you just supply me the css fix here and i will put it on the site myself.

You can test the bug by just uploading two PNG transparent background images to any product, and the hover the product in category view.

Hello,
Try to add the following code snippet to the Custom CSS area in Theme Settings.

.basel-hover-link .hover-img {
    left:0;
    right:0;
    bottom:0;
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
}
.basel-hover-link .hover-img > a {
    display: flex;
    display: -webkit-flex;
    -webkit-display: flex;
    -ms-display: flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
     flex: 1 1 auto;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    background-color: white;
}

Kind Regards
XTemos Studio

[Author]

Posts