How to make a hover effect for a product?

Question

WordPress

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:


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

Answer 1

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

Answer 2

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?