Home › Forums › Basel support forum › Hover images problem

Hover images problem

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • January 18, 2017 at 12:44 pm #9092

    batistuta9
    Participant

    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.

    January 18, 2017 at 1:07 pm #9093

    Artem Temos
    Keymaster

    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
Viewing 2 posts - 1 through 2 (of 2 total)