'Trying to zoom on hover of image: Circular image overflowing container

I'm trying to get a circular image to zoom when it's hovered. However, I can't get it to work - the image is overflowing the container. What am I doing wrong? Snippet below.

.col-lg-4.col-md-6.p-4{
  overflow:hidden !important
}


.img-fluid.d-block.mb-3.mx-auto.rounded-circle:hover{
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

img.rounded-circle.z-depth-1 {
  max-height:200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-4 col-md-6 p-4 johnDoe"> 
    <img class="img-fluid d-block mb-3 mx-auto rounded-circle" alt="Card image cap" width="200" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454811/team-1.jpg">
    <h4> <b class='bioName'>John Doe</b> </h4>
    <p class="mb-0">CEO and founder</p>
</div>
htmlcssimagebootstrap-4


Solution 1:[1]

In this type of issue I'm doing like this. Add a div for image and set overflow hidden.

.col-lg-4.col-md-6.p-4{
  overflow:hidden !important
}


.img-fluid.d-block.mb-3.mx-auto.rounded-circle:hover{
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

.img-holder {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

img.rounded-circle.z-depth-1 {
  max-height:200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-4 col-md-6 p-4 johnDoe"> 
    <div class="img-holder"><img class="img-fluid d-block mb-3 mx-auto rounded-circle" alt="Card image cap" width="200" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454811/team-1.jpg"></div>
    <h4> <b class='bioName'>John Doe</b> </h4>
    <p class="mb-0">CEO and founder</p>
</div>

Solution 2:[2]

The problem is your container is way bigger than the image, so the image can be enlarged and still be completely visible.

To achieve what you are looking for you need to add a container just the size of the image around it, so when the image expands it gets cropped. You will also need to make that container circular for the image to be cropped in a circular fashion.

Here is the code:

.johnDoe {
  text-align: center;
}
.img-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.img-container img {
  margin-bottom: 0 !important;
}

.img-fluid.d-block.mb-3.mx-auto.rounded-circle {
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

.img-fluid.d-block.mb-3.mx-auto.rounded-circle:hover{
    -webkit-transform: scale(1.1);
}

img.rounded-circle.z-depth-1 {
  max-height:200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-4 col-md-6 p-4 johnDoe"> 
  <span class="img-container">
    <img class="img-fluid d-block mb-3 mx-auto rounded-circle" alt="Card image cap" width="200" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454811/team-1.jpg">
  </span>
  <h4> <b class='bioName'>John Doe</b> </h4>
  <p class="mb-0">CEO and founder</p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Azizul Hoq Shamim
Solution 2 alotropico

Related Questions