Search code examples
htmlcssimagescaledisplay

Scale image from all sides

this might be a dumb problem but I've been struggling for hours on this...

I need to scale up an image on hover from all sides. Currently my image is scaling from only the right side.

I use bootstrap.

Image before scaling : Image before scaling

Image scaled : Image scaled

I think it's a display problem but I don't know how to fix it.

Bonus problem : I would like to have a little box fixed to the bottom of the image showing up when hovered, a bit like netflix. Any idea?

Many thanks

.grid{
  padding-top: 10px;
  background-color: white;
  }
.mini{
  height: 150px ;
  justify-content: flex-center;
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.a{
  margin: 25px;
  align-items: center;  
  display: flex;
 }
 .mini:hover{
  height: 250px;
  z-index: 5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }
<div class="container-fluid grid">
   <div class="row mt-5 r">
     <div class="col a r"><img src="images/1.jpg" class="mini"></div>
     <div class="col a r"><img src="images/2.jpg" class="mini"></div>
     <div class="col a r"><img src="images/3.jpg" class="mini"></div>
     <div class="col a r"><img src="images/4.jpg" class="mini"></div>
   </div>
</div>

Solution

  • may this can help in scale images issue

    .wrapper-content {
    display: flex;
    padding: 0;
    width: 100%;
    max-width: 1160px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.wrapper-image img {
    height: 100%;
    width: auto;
    transition: 0.5s;
}

.wrapper-image{
    overflow: hidden;
}
.wrapper-image {
    width: 200px;
    height: 300px;
    margin: 0;
}
.wrapper-image:hover img {
    transition: 0.5s;
    transform: scale(1.1);
}
    <div class="container">
   
    <div class="wrapper-content">
   
        <div class="wrapper-image">
          <img src="https://images.unsplash.com/photo-1469317835793-6d02c2392778?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1352&amp;q=80">
        </div>
      

      </div>
      
    </div>