Home › Forums › WoodMart support forum › Hover Image resize

Hover Image resize

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 16, 2020 at 10:00 pm #211776

    jdamgaard
    Participant

    Hi guys.
    Thnx for at great looking theme.

    How do I control the size transition of the product hover image.?
    I need the hover image to keep the original size, and therefore only transition the opacity.
    Or perhaps it could transition from a larger size to the original instead ?

    Allso, I would like the same hover image ( i believe it by default is the second product image ) to show as the primary ( default ) product image in the product page.?

    Thanks 🙂

    July 17, 2020 at 9:14 am #211891

    Elise Noromit
    Member

    Hello, 

    Please add this code to the Theme Settings > Custom CSS > Global:
body .category-grid-item .category-image {
-webkit-transform: none !important;
transform: none;
}
body .product-grid-item .product-element-top:hover .hover-img {
transform: none;
-webkit-transform: none;
}

    Best Regards

    July 18, 2020 at 7:38 am #212063

    jdamgaard
    Participant

    Thanks… however it was not quite what I was asking 🙂

    I lead me to finding the correct CSS changes though.

    Here is the CSS to change the resize on hover:
    Perhaps you would comment ?

    /* Product hover image scale */
    .product-grid-item .product-element-top:hover .hover-img {
    opacity: 1;
    -webkit-transform: scale(1.03); !important
    transform: scale(1.03); !important
    }

    I also have another request.

    On my live site, I´m using your Basel theme.
    Here the product image changes on hover ( on mobile devices it´s click/drag og first click.)
    Please tell me how i can have this effect in the Woodmart theme as well.

    July 18, 2020 at 11:24 am #212126

    Elise Noromit
    Member

    Hello,

    Please provide the page URL and screen how you want it to be. Basel has a lot of designs on hover and I cannot catch your idea.

    Best Regards

    July 18, 2020 at 8:24 pm #212230

    jdamgaard
    Participant

    Once again – i managed to find a solution 🙂
    For some reason, the hover image is hidden on mobile devices ?

    This CSS code fixed it.

    /* Product hover image show on mobile */
    .product-grid-item .hover-img {
    display: block; !important
    }

    July 19, 2020 at 11:02 am #212285

    Elise Noromit
    Member

    Hello,

    That is fine. If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)