Author: | imPatidar |
---|---|
Views Total: | 1,632 views |
Official Page: | Go to website |
Last Update: | October 29, 2018 |
License: |
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; }