how to add zoom in image overlay on hover [duplicate] - html

Question

This question already has answers here:
Creating a Zoom Effect on an image on hover using CSS?
(13 answers)
Closed last year.
I am trying to have a text slide up with an overlay but the problem that the overlay is sliding up with the text together what i really want is the overlay to be zoom in effect with the image and the text slide up here is an exemple that i am working on and i still can't achieve it.
Codepen exemple minus the zoom in effect
.clients {
position: relative;
}
.client-container {
position: relative;
width: 100%;
overflow: hidden;
}
.client-container .product-desc {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
text-align: right;
padding: 14em 0.4em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
}
.client-container:hover .product-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.client-container .product-desc2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
padding: 17em 0.4em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
}
.client-container:hover .product-desc2 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.brand-img {
display: block;
max-width: 100%;
height: auto;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 1.5s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.clients:hover .brand-img {
cursor: pointer;
transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.2);
-o-transform: scale(1.5);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" alt="Logo">
<figcaption class="product-desc">
<P>paragraphparagraphparagraph</P>
</figcaption>
<figcaption class="product-desc2">
<h4>text</h4>
</figcaption>
</figure>
</a>
</div>

Answer 1

You could add a pseudo to the container, in that way the background "is there" and does its job of fading in when needed. That way the text is its own entity and you are free to style both just the way you want it. I added
.client-container::after
.client-container:hover::after
and removed the background-color on the first fig caption.
.clients {
position: relative;
}
.client-container {
position: relative;
width: 100%;
overflow: hidden;
}
.client-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 0;
visibility: hidden;
z-index: 0;
}
.client-container:hover::after {
opacity: 1;
visibility: visible;
transition: opacity 350ms;
}
.product-desc {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
padding: 14em 0.4em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
z-index: 1;
}
.client-container:hover .product-desc {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.product-desc2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
text-align: right;
padding: 17em 0.4em 0.2em;
-webkit-transform: translateY(101%);
transform: translateY(101%);
transition: -webkit-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
z-index: 1;
}
.client-container:hover .product-desc2 {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.brand-img {
display: block;
max-width: 100%;
height: auto;
transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-webkit-transition: all 1.5s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.clients:hover .brand-img {
cursor: pointer;
transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
-webkit-transform: scale(1.2);
-o-transform: scale(1.5);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
<a href="#">
<figure class="client-container">
<img class="img-fluid brand-img" src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/team/t3.jpg" alt="Logo">
<figcaption class="product-desc">
<P>paragraphparagraphparagraph</P>
</figcaption>
<figcaption class="product-desc2">
<h4>text</h4>
</figcaption>
</figure>
</a>
</div>

Answer 2

I'm having some trouble understanding what it is you're trying to accomplish. What I think you want is that when a client hovers over the image that there is a small zoom and that some text comes slide-upwards. But you don't want them to see the overlay right?
If that's the case just keep your code the same but change background-color: rgba(0, 0, 0, 0.6);to background-color: transparent;.