Image Hover Zoom In Pure CSS

Preview:

Description:

A smooth image zoomer implemented in pure CSS that enables the visitor to zoom your image on mouse hover and mouse movement.

How to use it:

Create a 5×5 grid for the image zoomer.

<div class="grid-wrapper">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Insert an image to the image zoomer.

<img class="zoom-image" alt="placeholder image" src="1.jpg"/>

Style the grid in the CSS.

.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 400px;
}

.grid-item {
  height: 20%;
  width: 20%;
}

.grid-item {
  background-color: rgba(48, 197, 255, 0.25);
}

.grid-item:nth-of-type(2n) {
  background-color: rgba(186, 59, 70, 0.25);
}

.grid-wrapper {
  margin: 0 auto;
}

The core CSS to zoom the image on hover.

.zoom-image {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.25s;
  width: 100%;
  z-index: -1;
}

.grid-item:hover ~ img {
  height: 150%;
  width: 150%;
}

.grid-item:hover:nth-of-type(5n + 1) ~ img {
  left: 0px;
}

.grid-item:hover:nth-of-type(1n + 1) ~ .zoom-image {
  top: 0px;
}

.grid-item:hover:nth-of-type(5n + 2) ~ img {
  left: -50px;
}

.grid-item:hover:nth-of-type(1n + 6) ~ .zoom-image {
  top: -50px;
}

.grid-item:hover:nth-of-type(5n + 3) ~ img {
  left: -100px;
}

.grid-item:hover:nth-of-type(1n + 11) ~ .zoom-image {
  top: -100px;
}

.grid-item:hover:nth-of-type(5n + 4) ~ img {
  left: -150px;
}

.grid-item:hover:nth-of-type(1n + 16) ~ .zoom-image {
  top: -150px;
}

.grid-item:hover:nth-of-type(5n + 5) ~ img {
  left: -200px;
}

.grid-item:hover:nth-of-type(1n + 21) ~ .zoom-image {
  top: -200px;
}