Creating a Zoom Effect on an Image on Hover Using Css

How to zoom image on hover with CSS

Some minor modifications of @tim-klein answer to get effect from video

.container {  border: 1px solid black;  width: 100%;  height: 184px;  overflow: hidden;}
.container img {  width: 100%;  height: 100%;      transition: all 2s ease-in-out;}
.container:hover img {      transform: scale(2,2)}

<div class="container">  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/></div>

how to add zoom in image overlay on hover

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>

HTML & CSS, zoom image inside its container on hover

This well known animation is commonly done by zooming an img inside an element with a overflow: hidden. As overflow:hidden is for the content of an element and does not prevent him from getting bigger. Try this:

.cms-section-default.boxed [class*="cms-element"] {
  border-radius: 3px;
}
.body-selection-item {
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.8em 0.5em 0.2em 0.5em;
  text-align: center;
  flex-grow: 1;
  background-color: white;
  border: 1px solid #b2b2b2;
}

.body-selection-item-image {
  overflow: hidden;
  height: 15rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%;
}

.body-selection-item-image:hover img {
  transform: scale(1.05);
}

.body-selection-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.body-selection-item-text {
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0.5em;
  background: #1f1f1f;
  color: #fff;
}

<div class="cms-element-text">
  <div class="body-selection-item">
    <a title="Deckenleuchten" href="/Leuchten/Deckenleuchten/">
      <div class="body-selection-item-image">
        <img src="https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80" />
      </div>
      <div class="body-selection-item-text">MY TEXT-BOX</div>
    </a>
  </div>
</div>

How do I create a zoom out effect on a CSS background Image upon mouse hover?

With your current HTML scaffolding, scaling the background picture size will also scale the other elements contained within that div.

.bgImg
{
    background-image: url(http://placekitten.com/900/50);
    min-height: 520px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    transition: transform .2s;

}
.bgImg:hover {
  transform: scale(0.6)
}

<div class="bgImg">
 <app-navbar></app-navbar>
   <h1 class="profileName">XYZ   XYZ</h1>
  <img class="omi" src="http://placekitten.com/50/50" width="80" height="100" alt="Image Not Found">
</div>

CSS zoom in on image hover

You can wrap the image in a div:

<div class="item">
  <img src="http://via.placeholder.com/200x200">
</div>

And apply this CSS:

.item { //This is the container div
  border: 1px solid red;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.item img { //This is the img
  transition: all 0.3s;
}
.item:hover img { //This is the img during hover
  transform: scale(1.5); //Increase or decrease this number to change the zoom
}

.item {  border: 1px solid red;  overflow: hidden;  width: 200px;  height: 200px;}.item img {    transition: all 0.3s;}.item:hover img {  transform: scale(1.5);}

<div class="item">  <img src="http://via.placeholder.com/200x200"></div>

CSS Image zoom in on hover

You should apply the transition to the element, img tag in your case, and the effect (ie transform: scale;) on :hover. Hope that helps!

Have a look at this working example:

https://codepen.io/Angel-SG/pen/JwJzxg

.img-outer {      overflow: hidden;      max-width: 300px;      max-height: 300px;
    }
    .img-inner {      position: relative;
    }
    img {      transition: 0.5s ease;     }
    img:hover {      transform: scale(1.2);    }

    <div class="img-outer">     <div class="img-inner">      <img src="https://via.placeholder.com/300C/O       https://placeholder.com/" alt="image">     </div>    </div>

Using CSS to zoom on an image on hover but maintain the image size. I got it to work, but it's only displaying one corner of the image

Looking at your code example on codepen, the solution looks to be making the width of the img 100%. So in your example you would do something like:

.photo {
    width:100%
}

However, this cuts off the bottom of the image. You're going to need to adjust the height of the imgBox that contains the imgCard. It's currently set to 360px. Because of the way your example is written, it will probably be best for you to just choose a number so that the resulting image will have the same aspect ratio as the original image (playing around with it, 478px looks like the magic number to show the entire image).