WooCommerce Product image Hover

0
votes

I build a custom theme for cloth store and i installed plugin Woo-commerce.But on shop page, When Hover Woo-commerce Product image i need Buy now button.

here is Default product view by Woo-Commerce in my custom theme------

enter image description here

But i want like this when hover------------

enter image description here

so please help me someone? i could not find any way on google.Thx

1
wordpresswoocommercewordpress-themingwoothemes
Show your work till now.? - hemnath mouli
i am working on local server but here you can get similar work woocommerce @hemnath - Romi

1 Answers

0
votes

I Tried this css code and it works.

.woocommerce ul.products li.product a {margin: 0;position: relative;}
.woocommerce ul.products li.product a img {max-width: 100%;display:
 block;position: relative;}
.woocommerce ul.products li.product{overflow: hidden;}
.woocommerce ul.products li.product .product_details {opacity: 0;
-webkit-transform: translateY(100%);-moz-transform: translateY(100%);
-ms-transform: translateY(100%);transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;position: absolute;
bottom: 0%;left: 0%;background: #eee;color: #000;width: 100%;padding: 5px;}
.woocommerce ul.products li.product:hover .product_details {opacity: 1;
-webkit-transform: translateY(0px);-moz-transform: translateY(0px);   
-ms-transform: translateY(0px);transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s,opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;}