How to show cart on img hover WP

Question

I have some trouble with image hover idea on my website. Currently, my website is on local server, so I can not share the link. But I hope to explain correct.

I use twenty thirteen theme, woocommerce plugin and my task is to make pixel perfect custom design. So, I started with child theme creation and custom css.

My problem is to make add to cart button be visible only on product`s image hover. My current css for cart is:

form.cart {
margin-bottom: 0;
position: absolute;
top: 30px;
margin: 0 auto;
left: 0;
right: 0;
}
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
background-color: transparent;
color: #fff;
border: 1px solid #fff;
border-radius: 0;
font-size: 12px;
display: none;
}

Here is the needed result:

I can not fix the visibility of it only on products image hover.

I can overwrite everything needed. Thank you for help.

Possible duplicate of [Using only CSS, show div on hover over ](http://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a) — But those new buttons though.., Aug 23 '16 at 04:00

score 0 · Answer 1 · answered Aug 22 '16 at 20:29

Without knowing the structure of your HTML I cannot guarantee this will work, but something like:

.add-to-cart-button{
display: none;
}

.product-image:hover .add-to-cart-button{
display: block;
}

This will only work if your add to cart button is a child of product image or a child of a sibling of product image.

score 0 · Answer 2 · answered Feb 26 '19 at 09:26

For smooth transition, this is really great. (Display block / none is very rapid)

  .img-container {
        position: relative;
        overflow: hidden; 
/* this will hide the overflow that will be happening in translate(100%,100%)*/
      }

    .cart-btn {
        transition: all 1s ease-in-out;
        transform: translate(100%, 100%); 
/* this will put the element away from the cart */
    }

    .img-container:hover .cart-btn {
        transform: translate(0, 0); 
/* when hover, now the element is shown in their original position */ 
      }

How to show cart on img hover WP

2 Answers2