La siguiente es una publicación invitada de Dylan Winn-Brown, que nos muestra una forma eficiente de lograr este efecto de diseño.

Mientras trabajaba en el sitio web de un cliente recientemente, me pidieron que replicara un efecto como este.

Este tipo de efecto se utiliza especialmente en situaciones de tipo cartera en las que el diseño pretende mostrar detalles visuales e informativos.

Hay muchos métodos posibles

Como nunca antes había creado un efecto como este, comencé a echar un vistazo a diferentes formas de hacer esto y me encontré con varios métodos diferentes.

Una opción era usar un complemento de jQuery. Este no era el efecto que buscaba, y ciertamente no era 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 establecer el origen con srcset para que la imagen utilizada sea apropiada para el rendimiento y el dispositivo.

En mi situación, quería administrar el efecto por completo en CSS, así que fui por eso.

Funcionalidad básica

Para lograr un rendimiento óptimo, decidí usar la propiedad CSS transform para manejar la ampliación de la imagen. (Las animaciones CSS se benefician de la aceleración por hardware y, como resultado, aparecen más suaves que otros métodos de animación.)

En lugar de un <img>, utilicé un <div> adicional dentro del padre para actuar como la imagen. La estructura es:

<div class="parent"> <div class="child"></div></div>

Primero especificamos las dimensiones para el elemento padre. Luego, el hijo puede llenar el padre usando width: 100% y height: 100%;, así como establecer la imagen de fondo, asegurándose de que se escale 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 usar una herramienta para agregar prefijos para el mejor soporte posible del navegador.

Para terminar 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 colocamos el cursor sobre el elemento padre, el elemento hijo debe mostrar una superposición de color.

Finalmente, veremos cómo agregar texto para mostrar en nuestra superposición. Podemos añadir un elemento a nuestro actual del niño elemento así:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

podemos dar a nuestros <span> estilo:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

y podemos hacer que sea visible sólo cuando se pasa el ratón sobre la etiqueta .parent:

.parent:hover span,.parent:focus span { display: block;}

Demostración en vivo

Ver el zoom de imagen del lápiz en los sitios web de cartera flotante 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 en paz.