how to have a zoom effect on hover

Question

Well i am trying to have same effect that the image is having simply just zoom in with a light black layer and not to slide from bottom to top when i hover. I tried transform:scale(1); but it didnt turn well i am new developer so yeah you might find the code a bit off sorry about that.

 .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>

I just want the text to slowly zoom in with the light black layer to have same motion as the image eas in eas out without showing the bottom to top ugly transition please help:D

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>