Página principal » Codificación » Cómo crear Pure CSS onClick Image Zoom Effect

    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;  
    Estado inicial con los iconos visibles Expandir y ocultos Cerrar
    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;  
    Imagen ampliada con botón de cierre visible
    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.

    Ahora se realiza el efecto de zoom sobre el clic solo para CSS, vea 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é? 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.

    Esto puede ser cierto, sin embargo, cuando se trata de imágenes, utilizando el El elemento es más apropiado. Es aún más importante que cuando desee que el zoom Sucede al hacer clic en un área más grande en la imagen. en lugar de solo en el icono Expandir, te da una solución fácil.

      

    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 hablar también de las advertencias de esta solución, el eventos punteros La propiedad CSS (que usamos en el Paso 2) es compatible con Internet Explorer solo de la versión 11.

    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).