N
N
Nina Kraviz2018-02-13 23:45:54
WordPress
Nina Kraviz, 2018-02-13 23:45:54

How to make a hover effect for a product?

I'm making an online store on woocomerce, the theme is storefront: chainayanomer1.ru

Please tell me how to implement a similar hover effect so that the add to cart button is not initially highlighted and a short description is partially visible, but appears on hover?
Example:
5a834e655f92c537689156.jpeg

Taken from here https://101tea.ru/catalog/chay/

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Anton Drobyshev, 2018-02-14
@antoshadrobyshev

css
Your products have a class products ul.products li.product .button. Do visibility:hidden

$( "ul.products li.product" ).hover(function() {
    $( this ).find('ul.products li.product .button').css('visibility', 'visible');
});

More or less like this

N
Nina Kraviz, 2018-02-14
@avralexx

Hello, thank you very much, unfortunately, I didn’t deal with changing js before, only php and css through a child theme, could you tell me where to make these changes and is it possible to achieve a similar effect through css hover class?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question