Cómo crear CSS puro en el efecto Hacer clic en el zoom de la imagen

CSS no tiene una pseudoclase para apuntar eventos de clic, y esto constituye uno de los mayores puntos débiles de los desarrolladores front-end. La pseudo-clase más cercana es :active que estiliza un elemento para el período de tiempo que un usuario presiona su mouse sobre él.

Sin embargo, este efecto es efímero: una vez que el usuario suelta el mouse, : :active ya no funciona. Necesitamos encontrar alguna otra forma de emular el evento click en CSS .

Esta publicación se ha escrito en respuesta a la solicitud de un lector, y explica cómo orientar el evento de clic con CSS puro en un caso de uso específico, zoom de imagen .

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

Cuándo usar la solución CSS-Only

Antes de continuar, quiero decir que, para el zoom de imagen, recomiendo el método de solo CSS (que cambia las dimensiones de la imagen), solo cuando desee que una o varias imágenes tengan la función de zoom.

Para una galería adecuada, JavaScript proporciona más flexibilidad y eficiencia.

Técnicas de front-end que utilizaremos

Ahora que ha sido advertido, repasemos rápidamente las 3 técnicas clave que usaremos:

1. los
2. El atributo de usemap de uso de etiqueta, que conecta la imagen al mapa de imagen.
3. La :target CSS :target que representa un elemento que se ha segmentado utilizando su selector de ID.

1. Crea la base de HTML

Primero, creemos la base HTML. En el siguiente código, agregamos una imagen para ampliarla y expandimos y cerramos los íconos de los botones para acercar y alejar.

Es importante tener una ID en la imagen para hacer zoom, y el botón Cerrar necesita ser un enlace que tenga el atributo href="#", explicaré por qué más adelante en la publicación.

2. Agregue el CSS

Inicialmente, el ícono Cerrar no debería mostrarse . Las propiedades de position, margin-, left e bottom colocan los íconos de Expandir y Cerrar donde queremos que estén, en la esquina superior derecha de la imagen.

Los pointer-events: none; la regla permite que los eventos del mouse pasen a través del icono Expandir y lleguen a la imagen .

 .img {altura: 150px; ancho: 200px; } .close {background-image: url ("Close-icon.png"); background-repeat: no-repeat; abajo: 418px; pantalla: ninguna; altura: 32px; izquierda: 462px; margin-top: -32px; posición: relativa; ancho: 32px; } .expand {inferior: 125px; margin-left: -32px; margen-derecha: 16px; puntero-eventos: ninguno; posición: relativa; } 

En el mapa de la imagen, el área en la que se puede hacer clic debe estar en la esquina superior derecha de la imagen, justo debajo del ícono Expandir, y sobre su tamaño. Colocar el

En el bloque de código anterior, el etiqueta define la forma, el tamaño y el URI de un área enlazable dentro de un mapa de imagen. Para una forma rectangular, el atributo de shape toma el valor rect, y los cuatro valores del atributo coords representan 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 del atributo href tiene que ser el identificador hash de la imagen (esta es la razón por la cual la imagen debe tener un id .).

4. Enlace la imagen al Mapa de imagen

Agregue el atributo de usemap a la imagen para usemap al mapa de imagen . Su valor debe ser la representación hash del atributo de name del

 Cómo funciona el botón Cerrar 
Como el botón Cerrar se agregó como una imagen de fondo (Paso 2), y en realidad es una etiqueta con el atributo href=# (Paso 1), cuando se hace clic en él, elimina el identificador de fragmento del final del URI. Por lo tanto, también elimina la pseudo-clase de :target de la imagen y la imagen vuelve a su tamaño anterior .
Ahora se ha completado el efecto de zoom con solo CSS, revise la demostración a continuación o lea un poco más sobre la teoría detrás de los mapas de imágenes en la siguiente sección.
 Información de fondo: por qué 
A estas alturas, ciertamente comprende que lo más importante para que funcione esta solución de solo CSS es apuntar a la imagen utilizando el atributo href="#imgid", que también podría hacerse utilizando la etiqueta en lugar del mapa de imagen.
Esto puede ser cierto, sin embargo cuando se trata de imágenes, usando el 
El valor default para el atributo de shape crea un área rectangular enlazable que cubre toda la imagen . Si fuera a utilizar en su lugar, tendría que codificarlo para cubrir la imagen, y también podría tener que usar un elemento contenedor para el mismo propósito.
Para hablar también sobre las advertencias de esta solución, la propiedad CSS de pointer-events (que usamos en el Paso 2) solo es compatible con Internet Explorer a partir de la versión 11 .
Para admitir navegadores IE antes de eso, es posible que desee utilizar en lugar de 







        

          
          

		  
Stylie - Un generador de animaciones web CSS gratuito
            
Si tiene problemas con la sintaxis de CSS3 y desea una forma sencilla de crear animaciones, Stylie es una gran herramienta para guardar.Este es uno de los muchos generadores de código gratuitos que se centran en los efectos animados puros de CSS. Stylie es totalmente gratuito y de código abierto, alojado en GitHub y alimentado por una biblioteca de fotogramas clave llamada Rekapi.L
			
(Consejos de tecnología y diseño)
          
        
      

        

          
          

		  
20 geniales regalos que los diseñadores adorarían
            
¡Nunca es un mal momento para darse un regalo a usted mismo o a sus amigos diseñadores web! Si alguna vez se ha preguntado qué puede conseguir la persona creativa que parece tener todo, esta vitrina de 20 regalos geniales para diseñadores web en su vida le daría algunas ideas nuevas. Los precios varían de $ 10 a $ 100, por lo que todos deberían encontrar algo que se adapte a sus ocasiones (y sus bolsillos).Aquí e
			
(Consejos de tecnología y diseño)