Solución efecto de zoom de imagen flotante con CSS puro

Vista prévia

Descripción

Una solución CSS minimalista para crear un efecto de zoom de imagen flotante para la ampliación del producto.

Funcionamiento

Inserte una imagen en un contenedor DIV:

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

Estile la imagen y hágalo en posición absoluta.

.zoom-image {

height: 100%;

left: 0;

position: absolute;

top: 0;

-webkit-transition: all 0.25s;

transition: all 0.25s;

width: 100%;

z-index: -1;
}

Agregue elementos de cuadrícula como un over que hará que el zoom y la ubicación de la imagen cuando el mouse pasa el ratón.

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

El CSS para los elementos de cuadrícula.

.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; }