CSS Animación efecto zoom y desenfoque con dos columnas

En el diseño web, los efectos de animación pueden hacer que un sitio se vea mucho más interactivo y atractivo para los usuarios. Hoy veremos cómo lograr un efecto de zoom y desenfoque en columnas de imágenes usando CSS y HTML.

Imaginemos que tenemos dos columnas, cada una con una imagen. Al pasar el cursor sobre una columna, queremos que:

1. La imagen de esa columna se amplíe (zoom).
2. La otra columna se desenfoque para dirigir la atención del usuario.

Veamos paso a paso cómo hacerlo:

Estructura HTML Básica

Primero, estructuramos nuestro HTML para tener un contenedor con dos columnas. Cada columna contiene una imagen:

<div class="container">
    <div class="column" id="column1">
        <img src="https://via.placeholder.com/400x600" alt="Imagen 1">
    </div>
    <div class="column" id="column2">
        <img src="https://via.placeholder.com/400x600" alt="Imagen 2">
    </div>
</div>

Desenfoque de la Columna Adyacente con CSS

CSS por sí solo permite desenfocar un elemento adyacente en todos los navegadores que soporten el selector has, de lo contrario tendría que usarse Javascript.

El código CSS necesario es:

* { margin: 0; padding: 0; }
        .container {
            display: flex;
            width: 100%;            
            margin: auto;
            height: 100vh; /* Fijas la altura para container */
            overflow: hidden;
        }

        .column {
            flex: 1;
            position: relative;
            overflow: hidden; /* Ocultas parte de la imagen que se hace zoom */
            transition: flex 0.5s ease;
        }

        .column img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Te aseguras que la imagen ocupe toda la columna sin distorcionarse */
            transition: transform 0.5s ease, filter 0.5s ease;
        }

        /* Aplicas el efecto a cada columna */
        .column:hover {
            flex: 1.2; /* Agrandas las columna */
        }

        .column:hover img {
            transform: scale(1.1); /* Escalas la imagen */
        }

                
        /* Aplicas el efecto de desenfoque en cada imagen */        
        .column:hover + .column img {    
            filter: blur(5px); 
        }

        .column:has(~ .column:hover) img {
            filter: blur(5px);            
        }    

Ver el efecto CSS funcionando

Puedes ver el efecto en este enlace