Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away.
.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>If you'd like to see a demo, check out this Codepen link: