#StackBounty: #html #css #image #bootstrap-4 scale image on hover – unexpected behavior on mobile

Bounty: 50

I have an image i’d like to scale when hovering. My code works just fine on larger screen sizes, but on mobile, it is not working (image looks oddly scaled when I hover). I think it has to do with the image holder div, but when I try and set the max-width and height on mobile only, I still can’t get it to work. Any help appreciated! Thanks.

To replicate this issue – try viewing the following snippet in mobile, and hovering over the image (it will behave oddly):

.img-holder {
  max-width: 200px;
  max-height: 200px;
  overflow: hidden !important;
  border-radius: 50%;
  margin:0 auto

h4, p{

.bio-holder {

        -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;
.bioName, .aboutHeading {
   color: #030b07;


.bioName {
   font-size: 35px;
<div class="col-6 col-md-4 p-4 staff-category"> 
  <div class="img-holder">
    <img class="img-fluid d-block mb-3 mx-auto rounded-circle" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454870/team-3.jpg" alt="Card image cap" width="200">
   <div class="bio-holder">
    <h4 class="people_name"> <b class='bioNamePreview'>Ronald McDonald</b> </h4>
    <p class="mb-0">CEO and founder</p>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.