I am currently facing an issue with utilizing images in my project. I aim for them to resemble the first two pictures. However, when I attempt to adjust the image height using CSS, the result ends up looking unappealing. Is there a method for the images to resize automatically without overlapping, similar to what occurred with the third image?
CSS :
.product-image-wrapper{
border:1px solid #F7F7F5;
overflow: hidden;
margin-bottom:30px;
}
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h2{
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
}
.product-overlay h2{
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
.productinfo img{
width: 100%;
}
.productinfo{
position:relative;
}
.product-overlay {
background:#FE980F;
top: 0;
display: none;
height: 0;
position: absolute;
transition: height 500ms ease 0s;
width: 100%;
display: block;
opacity:;
}
.single-products:hover .product-overlay {
display:block;
height:100%;
}
.product-overlay .overlay-content {
bottom: 0;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.product-overlay .add-to-cart {
background:#fff;
border: 0 none;
border-radius: 0;
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 15px;
margin-bottom: 25px;
}
.product-overlay .add-to-cart:hover {
background:#fff;
color: #FE980F;
}
.product-overlay p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #fff;
}
This is how my actual page appears: