WooCommerce 产品图片悬停答案

【问题标题】：WooCommerce Product image HoverWooCommerce 产品图片悬停
【发布时间】：2016-03-14 07:30:49
【问题描述】：

我为布料商店构建了一个自定义主题并安装了插件 Woo-commerce。但是在商店页面上，当 Hover Woo-commerce 产品图片时我需要立即购买按钮。

这是 Woo-Commerce 在我的自定义主题中的默认产品视图-----

但我想在悬停时这样------------

所以请帮帮我吗？我在 google 上找不到任何方法。谢谢

【问题讨论】：

展示你的作品到现在。？
我在本地服务器上工作，但在这里你可以得到类似的工作woocommerce@hemnath

标签： wordpress woocommerce wordpress-theming woothemes

【解决方案1】：

我试过这个 css 代码，它可以工作。

.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;}

【讨论】：