WooCommerce产品图片悬停 _WordPress主题

我为布料商店建立了自定义主题, 并安装了插件Woo-commerce。但是在商店页面上, 当悬停Woo-commerce产品图片时, 我需要立即购买按钮。
这是Woo-Commerce在我的自定义主题中的默认产品视图— —

文章图片
【WooCommerce产品图片悬停】但是当我悬停时我想要这样— — — —

文章图片
所以请你帮我我在google.thx上找不到任何方式
#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; }