Pure CSS Image Hover Zoom Solution

Preview:

Description:

A minimalist CSS solution to create an image hover zoom effect for product magnification.

How to use it:

Insert an image into a DIV container:

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

Style the image and make it absolute positioned.

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

Add grid items as a over which will effect the zoom and location of the image when mouse hover.

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

The CSS for the grid items.

.grid-item {
  height: 20%;
  width: 20%;
}
.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; }