how to have a zoom effect on hover - html

Question

Well all i want is to have a slide up text with a zoom in light grey filter
so when i hover on the text slide up and a filter zoom in same motion as the image here is a codepen project it shows what i mean sadly i cant figure it out thanks in advance here is the link : Codepen exemple
Thanks in advance
.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 1sms ease-in-out;
transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1sms 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 1sms ease-in-out;
transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1sms 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);
}
<div class="clients 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://1757140519.rsc.cdn77.org/blog/wp-content/uploads/2013/06/jpg.png" alt="Logo">
<figcaption class="product-desc"><P>2022 all rights reserved</P></figcaption>
<figcaption class="product-desc2"><h4>name</h4></figcaption>
</figure>
</a>
</div>

Answer 1

Use the opacity: 0; to set your text invisible. You can now change the the opacity to 1 on the hover when you want to have it visible. For the zoom effect, you can use transform: scale(x);.
Here is an example with your code:
.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;
opacity: 0;
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;
}
.client-container:hover .product-desc {
cursor: pointer;
opacity: 1;
transform:scale(1.5);
-ms-transform:scale(1.5);
-moz-transform:scale(1.5);
-webkit-transform:scale(1.2);
-o-transform:scale(1.5);
}
.client-container .product-desc2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: left;
align-items: center;
color: #fff;
opacity: 0;
text-align: right;
padding: 17em 0.4em 0.2em;
transition: -webkit-transform 1sms ease-in-out;
transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out, -webkit-transform 1sms ease-in-out;
}
.client-container:hover .product-desc2 {
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);
opacity: 1;
}
.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);
}
<div class="clients 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://1757140519.rsc.cdn77.org/blog/wp-content/uploads/2013/06/jpg.png" alt="Logo">
<figcaption class="product-desc"><P>2022 all rights reserved</P></figcaption>
<figcaption class="product-desc2"><h4>name</h4></figcaption>
</figure>
</a>
</div>