Cómo crear Pure CSS onClick Image Zoom Effect

CSS no tiene una pseudoclase para eventos de clic de segmentación, y esto constituye uno de los mayores puntos de dolor de desarrolladores front-end. La pseudo-clase más cercana es :activo qué estilos de un elemento para el período de tiempo que un usuario presiona su mouse sobre él.

Sin embargo, este efecto es de corta duración: una vez que el usuario suelta el mouse, :activo ya no funciona Necesitamos encontrar otra forma de emular el evento click en CSS.

Esta publicación ha sido escrita en respuesta a la solicitud de un lector, y explicará cómo Apunta el evento click con CSS puro en un caso de uso específico, zoom de imagen.

Puedes ver el resultado final a continuación: una solución solo para CSS zoom de imagen al hacer clic.

Cuándo usar la solución CSS-only

Antes de continuar, quiero decir que, para el zoom de la imagen, recomiendo el método solo para CSS (que cambia las dimensiones de la imagen), solo cuando desee una soltero o un grupo de pocas imagenes tener la función de zoom.

Para apropiado Galería, JavaScript proporciona más flexibilidad y eficiencia.

Técnicas frontales que usaremos

Ahora que ha sido advertido, veamos rápidamente la 3 técnicas clave estaremos usando

1. los Etiqueta HTML que permite a los navegadores crear áreas enlazables sobre una imagen. Lea más sobre el elemento en mi post anterior.
2. los mapa de usuario atributo de la etiqueta, que enlaza la imagen al mapa de imagen.
3. los :objetivo CSS pseudo-clase que representa un elemento que ha sido seleccionado utilizando su selector de ID.

1. Crea la base HTML

Primero, vamos a crear la base HTML. En el código de abajo, agregamos Una imagen para ampliar y ampliar. Y cerrar los iconos de botón para acercar y alejar.

Es importante tener una ID en la imagen que se va a ampliar, y el botón Cerrar debe ser un enlace que tenga la href = "#" atributo, voy a explicar por qué más adelante en el post.

2. Agrega el CSS

Inicialmente, el icono Cerrar no debe mostrarse. los posición, margen-, izquierda, y fondo propiedades lugar la Expandir y cerrar iconos donde queremos que estén, en la esquina superior derecha de la imagen.

los punteros-eventos: ninguno; la regla permite que los eventos del mouse pasar a través del icono expandir y llegar a la imagen.

 .img altura: 150px; ancho: 200px;  .close background-image: url ("Close-icon.png"); repetición de fondo: no repetición; abajo: 418px; pantalla: ninguna; altura: 32px; izquierda: 462px; margen superior: -32px; posición: relativa; ancho: 32px;  .expand abajo: 125px; margen izquierdo: -32px; margen derecho: 16px; punteros-eventos: ninguno; posición: relativa;  

3. Añade el mapa de imagen

En el mapa de imagen, el área seleccionable debiera ser en la esquina superior derecha de la imagen justo debajo del icono Expandir, y sobre su tamaño. Colocar el elemento antes de la primera etiqueta en el HTML. Uniremos la imagen al mapa en el siguiente paso..

En el bloque de código de arriba, el etiqueta define la Forma, tamaño y URI de un área enlazable dentro de un mapa de imagen. Para forma rectangular, la forma atributo toma el rect valor, y el cuatro valores del Coords atributo representa la distancia en píxeles entre:

1. El borde izquierdo de la imagen y el borde izquierdo del área de enlace.
2. El borde superior de la imagen y el borde superior del área de enlace.
3. El borde izquierdo de la imagen y el borde derecho del área de enlace.
4. el borde superior de la imagen y el borde inferior del área de enlace

El valor de la href atributo tiene que ser el identificador hash de la imagen (Es por esto que la imagen debe tener un carné de identidad).

4. Enlazar la imagen al mapa de imagen.

Añade el mapa de usuario atribuir a la imagen a fin de enlazarlo al mapa de imagen. Su valor tiene que ser el representación hash de la nombre atributo de la etiqueta añadimos en el paso 3.

El área seleccionable del mapa de imagen ahora se encuentra detrás del botón Expandir. Cuando el usuario hace clic en el botón Expandir, en la zona en la que se puede hacer clic se hace clic: recuerde que creamos el botón Expandir “pasable” con el punteros-eventos: ninguno; gobernar en el paso 2.

De esta manera el usuario se dirige a la imagen en sí Al hacer clic en él, y después de hacer clic, el URI aparece con el sufijo "# img1" identificador de fragmento.

5. Estilo del :objetivo Pseudo-clase

Hasta el "# img1" el identificador del fragmento está al final de la URI, la imagen seleccionada puede ser estilo con el :objetivo pseudo-clase

Las dimensiones de la imagen seleccionada aumentan, el botón Cerrar se muestra y el botón Expandir se oculta.

 .img: target altura: 450px; ancho: 500px;  .img: target + .close display: block;  .img: target + .close + .expand display: none;  

Cómo funciona el botón Cerrar

Como el botón Cerrar se agregó como imagen de fondo (Paso 2), y en realidad es un etiqueta con el href = # atributo (Paso 1), cuando se hace clic, elimina el identificador del fragmento del final del URI. Por lo tanto también elimina el :objetivo pseudo-clase De la imagen, y la imagen. vuelve a su tamaño anterior.

Información de fondo: ¿Por qué? y no ?

A estas alturas, sin duda comprenderá que lo más importante para que funcione esta solución solo para CSS es apuntar a la imagen usando el href = "# imgid" atributo, lo que también podría hacerse utilizando el etiqueta en lugar del mapa de imagen.

los defecto valor por forma atributo crea un Área enlazable rectangular que cubre toda la imagen.. Si fueras a usar en su lugar, tendría que codificarlo para cubrir la imagen, y es posible que también tenga que usar un elemento de envoltura para el mismo propósito.

Para admitir los navegadores IE antes de eso, es posible que desee utilizar en lugar de , o haga clic en la imagen para ampliarla (en este caso, no será necesario el icono Expandir).