When I display cards, hovering over the card will increase its height and reveal the description. The following is my CSS and code, and I am looking to add a transition effect while adjusting the height:
<div className="icon-box">
<div className="icon">
<img
src={item.compliance_logo}
style={{ height: "100%", width: "110%" }}
alt="logo"
/>
</div>
<h3>
<a style={{ color: "#000080" }}>{item.compliance_name}</a>
</h3>
<p style={{ fontSize: "12px" }}>
{item.compliance_description}
</p>
</div>
The corresponding CSS is as follows:
.icon-box {
padding: 30px;
background: #fff;
box-shadow: 0px 5px 90px 0px #f0f0ff;
border-radius: 18px;
border-bottom: 5px solid #fff;
height: 150px;
font-size: small;
overflow-y: hidden;
cursor: pointer;
}
.icon-box:hover {
transform: translateY(-10px);
transition: height 4s ease-in-out;
border-color: #000080;
height: max-content;
}