Navigation
Archive / Woocommerce: Hover effect over the product images
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • March 20, 2017 at 5:48 pm #1414285

    christine-i
    Participant

    Hello,
    I´d like to create a hover effect over the product images of my woocommerce shop page. The hover effect should be a border around the product image and a simple transparent color.

    How can I achieve this?
    Thanks in advance.

    Best regards,
    Christine

    March 20, 2017 at 9:40 pm #1414535

    Prasant Rai
    Moderator

    Hello Christine,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    Thanks.

    March 21, 2017 at 6:01 am #1414776

    christine-i
    Participant
    This reply has been marked as private.
    March 21, 2017 at 9:31 am #1414968

    Thai
    Moderator

    Hi There,

    Please try adding the following CSS:

    .woocommerce li.product .entry-featured img {
    border: 2px solid transparent;
}
.woocommerce li.product:hover .entry-featured img {
    opacity: 0.75;
    border-color: #292462;
}

    Hope it helps 🙂

  • Author
    Posts