Attempting to zoom in when hovering over the circular image causes it to spill out of the container

Can someone help me figure out why my circular image isn't zooming when hovered? I've tried adding CSS properties, but the image keeps overflowing the container. What am I missing here? See the code 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

Answer №1

The issue lies in the fact that your container is much larger than the image, allowing the image to be enlarged without being fully displayed.

To achieve the desired result, you will need to create a container that matches the size of the image, so that when the image expands, it gets cropped accordingly. Additionally, this container should be circular to ensure the image is cropped in a circular manner.

Below is the code snippet:

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

Answer №2

For a situation like this, the approach I take is to create a div specifically for the image and then set its overflow property to 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to position images alongside input fields using Bootstrap?

Struggling to design a user login page for my webapp, specifically getting the username image and input to display next to each other. It used to work fine, but now they won't align properly. I know it's a mess, anyone spot the issue here? I&apo ...

htmlcss

Despite implementing proper practices, the performance of Android Custom listview still lags significantly

I have been developing a VR Android application and I am facing an issue with the custom listview that I am using to display images to the user. The scrolling of the listview is extremely laggy for some reason. Despite going through several tutorials on ho ...

androidimagelistview

Ensure YouTube iframe remains visible above all other elements on mobile devices at all times

Currently, my method involves utilizing YouTube for embedding videos and incorporating certain elements that should display on top of the video when clicked on. Regrettably, this functionality operates flawlessly on desktop browsers but encounters issues ...

htmlflashyoutubehtml5-video

iPad screen not displaying overflow for x and y axis

I'm encountering an issue with displaying the scrollbar on a div while using an iPad device. Currently, I am utilizing: -webkit-overflow-scrolling: touch; Although this is functioning properly, my goal is to have the scrollbar visible without the ...

jqueryhtmlioscssoverflow

Is it possible to perform a PHP redirect after the headers have been

I am encountering an issue with a function that needs to redirect the page once a variable is set. The challenge arises from the fact that this function is located at the bottom of the PHP page. As a result, I have already displayed a significant amount ...

phpjavascripthtml

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

javascriptjqueryhtmlcss

Having trouble getting the edits in my SCSS file to reflect in the HTML

After downloading a theme, I attempted to edit the background of the "navbar_fixed" in the <header class="main_menu_area navbar_fixed"> .scss code for custom CSS. However, despite my efforts, the changes made in the .scss file do not reflect in the H ...

htmlcsssass

Using pre-existing CSS state background colors in GTK3

I am currently in the process of adapting a PyGTK2 application. This particular application performs tasks such as: self.normal_color = editor.style.base [Gtk.STATE_NORMAL] self.insensitive_color = editor.style.base [Gtk.STATE_INSENSITIVE ...

pythoncssgtk3

Tips for implementing varying styles depending on the number of columns in a table

I am working with multiple tables that share similarities, but differ in the number of columns each table has. I am looking to create a styling rule where depending on the number of columns, the width of each column will be set accordingly. For example, if ...

htmlcss

What is the method for utilizing the onmouseover function to emphasize a specific part of an SVG graphic?

I am attempting to create an interactive SVG map of Europe. Each country is represented by a path element, and I want the opacity of a country to change to 0.5 when it is hovered over. Despite trying to define a JavaScript function for this purpose, noth ...

javascriptcsssvg

Is it possible to rearrange the positions of 2 divs using solely CSS?

I have created a unique design. On iPad, I am assigning the class 'handHeld' to the <body>, which will trigger positional changes between optionsWrapper and #container using CSS classes I've defined below on jsfiddle.net. .handHeld d ...

javascriptjqueryhtmlcss

When the CSS visible property is set to false, do controls in Firefox still respond to mouse events?

Currently encountering an issue with FIREFOX. There seems to be an invisible list control above a drop-down control (html 'select'). The hidden layer is actually a pop-up that is part of another customized control. Despite its invisibility, it i ...

cssfirefoxdrop-down-menumouseeventvisibility

What causes my image to overlap my navigation bar when I rotate it?

Is there a way to rotate images in CSS without causing them to overlap with other elements on the page? When I try to adjust the rotation property, the image sticks to the top of the page and overlaps the navigation bar. Below is the code snippet: HTML C ...

htmlcss

Executing a Python function through a Bootstrap button in a Django web application

Currently, I am in the process of creating a web interface with Django and I am looking to execute some Python code when a Bootstrap button is clicked. I am unsure of which Python file I should place this code in and how to call the function. The specific ...

djangopython-3.xbootstrap-4onclick

Variety of HTML tags yet identical ID

Is it possible to have two elements with different types – such as a div and an ul with the same id in HTML? Here is an example of HTML code: <div id="articleOptions"> <ul id="articleOptions"> <li>Share</li> ...

htmlcss

How can JavaScript be used to rearrange the placement of DOM elements?

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="boxes"> <div class="red" style="width: 300px; height: 300px; color: red"></div> <div class="blue ...

javascripthtmlcss

Prevent Html.Action function from being invoked during page loading

Below is a div within a parent view that contains a Html.Action returning a PartialView: <div id="preview" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> ...

javascriptjqueryhtmlasp.net-mvc

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

Parent: Using Flexbox vs Child: Choosing between inline-block or inline elements (Advantages of utilizing CSS3 flexbox?)

I've been exploring the capabilities of CSS3's new "display: flex" property and trying to determine its advantages. So far, I haven't discovered any significant benefits beyond creating a virtual horizontal line within each flex box containe ...

cssresponsive-designflexbox

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

I have a unique situation with two input elements and a button: <input class="close-acc-usr opt-in" type="text" name="closeAccUsr" /> <input class="close-acc-pin opt-in" type="number" name="cl ...

javascripthtmlcss