Small Images' Gallery

by MrStan1slav

HTML

<div id="container">
  <div class="wrapper">
    <div class="imgWrapper"><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img"></div>
  </div>
  <div class="wrapper">
    <div class="imgWrapper"><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img"></div>
  </div>
  <div class="wrapper">
    <div class="imgWrapper"><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img"></div>
  </div>
  <div class="wrapper">
    <div class="imgWrapper"><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img"></div>
  </div>
  <div class="wrapper">
    <div class="imgWrapper"><img src="https://images.pexels.com/photos/19677/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="img"></div>
  </div>
</div>

CSS

#container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.wrapper {
  width: 18%;
  min-width: 80px;
  margin-bottom: 10px;
  transition:all .5s;
}
.wrapper:hover {
  transform:scale(1.1);
}

.imgWrapper {
  position: relative;
  width: 100%;
  height: inherit;
  padding-top: 50%;
  padding-bottom: 50%;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}