Zoom de imagen en CSS puro

Vista prévia

Descripción

Un Zoomer de imagen suave implementado en CSS puro que permite al visitante zoom su imagen en el ratón Hover y el movimiento del ratón.

Funcionamiento

Cree una rejilla de 5 × 5 para el Zoomer de la imagen.

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

Inserte una imagen en el Zoomer de la imagen.

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

Estilo de la cuadrícula en el 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;
}

El núcleo CSS para acercar la imagen en el 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;
}