Author: | dgca |
---|---|
Views Total: | 2,564 views |
Official Page: | Go to website |
Last Update: | April 22, 2016 |
License: | MIT |
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; }