La siguiente es una publicación invitada de Dylan Winn-Brown, quien nos muestra una forma eficaz de lograr este efecto de diseño.
Mientras trabajaba en el sitio web de un cliente recientemente, se me pidió que replicara un efecto como este.
Contenedores con imágenes de fondo que hacen zoom dentro de su contenedor al pasar el mouse, revelando más información.
Este tipo de efecto se utiliza notablemente en situaciones de tipo cartera en las que el diseño pretende mostrar detalles tanto visuales como informativos.
Hay muchos métodos posibles diferentes
Como nunca antes había creado un efecto como este, comencé a ver diferentes formas de hacerlo y encontré varios métodos diferentes.
Una opción era utilizar un complemento jQuery. Este no fue el efecto que buscaba, y ciertamente no fue muy ligero.
Otra opción era colocar un <img> dentro del contenedor y manipularlo con CSS. Podría haber algunos beneficios potenciales aquí, como poder configurar la fuente con srcset para que la imagen utilizada sea adecuada para el rendimiento y el dispositivo.
En mi situación, quería administrar el efecto por completo en CSS, así que opté por eso.
Funcionalidad básica
Para lograr un rendimiento óptimo, decidí usar CSS transform propiedad para manejar la ampliación de la imagen. (Las animaciones CSS se benefician de la aceleración de hardware y, como resultado, parecen más fluidas que otros métodos de animación).
En lugar de un <img>, Utilicé un adicional <div> dentro del padre para actuar como la imagen. La estructura es:
<div class="parent">
<div class="child"></div>
</div>Primero especificamos las dimensiones del elemento padre. Entonces el niño puede llenar al padre usando width: 100% y height: 100%;, así como establecer la imagen de fondo, asegurándose de que se amplíe para cubrir el área.
.parent {
width: 400px;
height: 300px;
}
.child {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-image: url("images/city.jpg");
background-position: center;
background-size: cover;
}Luego agregamos efectos de desplazamiento a nuestro elemento padre que afectarán a nuestro elemento hijo. Un estilo de enfoque también es bueno para la accesibilidad:
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
}Es posible que desee utilizar una herramienta para agregar prefijos para obtener la mejor compatibilidad posible con el navegador.
Para finalizar el efecto básico, podemos agregar algunas transiciones al estado normal de nuestro elemento hijo:
transition: all .5s;Si desea agregar una superposición de color, puede hacer uso de pseudo elementos como ::before:
.child::before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52, 73, 94, 0.75);
}
.parent:hover .child:before,
.parent:focus .child:before {
display: block;
}Ahora, cuando pasamos el cursor sobre el elemento principal, el elemento secundario debería mostrar una superposición de color.
Finalmente, cubriremos cómo agregar texto para mostrar en nuestra superposición. Podemos agregar un elemento a nuestro elemento hijo actual así:
<div class="parent">
<div class="child">
<span>Hello</span>
</div>
</div>Podemos dar nuestro <span> algo de estilo:
span {
color: white; /* Good thing we set a fallback color! */
font-family: sans-serif;
padding: 25%;
position: absolute;
}y podemos hacerlo visible solo cuando colocamos el cursor sobre el .parent:
.parent:hover span,
.parent:focus span {
display: block;
}Demo en vivo
Vea el zoom de la imagen del lápiz al pasar el mouse: sitios web de cartera de Dylan (@dwinnbrown) en CodePen.
Soporte móvil
Si los contenedores son enlaces y los estados flotantes no revelan ninguna información esencial, puede dejarlo solo.
Si los estados de desplazamiento son importantes, para que esto funcione en pantallas táctiles, podemos usar vacío onclick="" manipuladores en nuestro .parent contenedores. Desafortunadamente, no pude encontrar otra forma de hacer esto, pero si alguno de ustedes lo hace, ¡hágamelo saber en los comentarios!