How to set time for a div with opacity?

Question

I can hover product-list-item div then the add-to-cart will appear. When I move the mouse out of product-list-item , it will disappear. How to set the appear's time of add-to-cart when the mouse is already on product-list-item ?

 .product-list-item { position: relative; width: 25%; float: left; height: 320px; border: 1px solid rgb(228, 225, 225); border-radius: 5px; padding: 15px; } .product-list-item:hover { box-shadow: 5px 5px 10px 5px rgb(231, 231, 231); } .product-list-item:hover .add-to-cart { opacity: 1; right: 20px; } .add-to-cart { position: absolute; bottom: 15px; right: 0px; opacity: 0; transition: 0.3s ease-in-out; } .add-to-cart>.btn { color: white; font-weight: bold; text-transform: uppercase; background-color: red; }

 <div class="product-list-item"> <div class="add-to-cart"> <button class="btn">add-to-cart</button> </div> </div>

Here's a codepen:

https://codepen.io/quantranbber/pen/WNbezQb

Answer 1

Simply add transition-delay when to add-to-cart when product-list-item is on hover to "set the [item's appearance delay]".

 .product-list-item { position: relative; width: 25%; float: left; height: 320px; border: 1px solid rgb(228, 225, 225); border-radius: 5px; padding: 15px; } .product-list-item:hover { box-shadow: 5px 5px 10px 5px rgb(231, 231, 231); } .product-list-item:hover .add-to-cart { opacity: 1; right: 20px; transition-delay: 3s; // Add the amount of time you want to delay } .add-to-cart { position: absolute; bottom: 15px; right: 0px; opacity: 0; transition: 0.3s ease-in-out; } .add-to-cart>.btn { color: white; font-weight: bold; text-transform: uppercase; background-color: red; }

 <div class="product-list-item"> <div class="add-to-cart"> <button class="btn">add-to-cart</button> </div> </div>