Comment créer un effet de zoom sur une image CSS pure

CSS n'a pas de pseudo-classe pour cibler les événements de clic, et cela constitue l'un des plus grands points de douleur des développeurs frontaux. La pseudo-classe la plus proche est :active qui code un élément pour la période de temps pendant laquelle un utilisateur appuie dessus.

Cet effet est cependant de courte durée: une fois que l'utilisateur relâche la souris, : :active ne fonctionne plus. Nous devons trouver un autre moyen d' émuler l'événement click en CSS .

Ce message a été écrit en réponse à une demande d'un lecteur, et il va expliquer comment cibler l'événement click avec du CSS pur dans un cas d'utilisation spécifique, le zoom d'image .

Vous pouvez voir le résultat final ci-dessous - une solution CSS uniquement pour le zoom d'image sur le clic .

Quand utiliser la solution CSS uniquement

Avant de continuer, je tiens à dire que pour le zoom d'image, je recommande la méthode CSS uniquement (qui change les dimensions de l'image), seulement quand vous voulez qu'un seul ou un groupe de quelques images aient la fonction de zoom.

Pour une galerie appropriée, JavaScript offre plus de flexibilité et d'efficacité.

Techniques frontales que nous utiliserons

Maintenant que vous avez été averti, examinons rapidement les trois techniques clés que nous allons utiliser:

1. le
2. L' attribut usemap du tag, qui relie l'image à la carte d'image.
3. La pseudo-classe CSS :target qui représente un élément ciblé à l'aide de son sélecteur d'ID.

1. Créez la base HTML

D'abord, créons la base HTML. Dans le code ci-dessous, nous ajoutons une image à zoomer et agrandir et fermons les icônes des boutons pour zoomer et dézoomer.

Il est important d'avoir un identifiant sur l'image à zoomer, et le bouton Fermer doit être un lien qui a l' href="#", je vais vous expliquer pourquoi plus tard dans la publication.

2. Ajouter le CSS

Initialement, l'icône Fermer ne devrait pas être affichée . Les margin- position, de margin-, de left et de bottom placent les icônes Développer et Fermer à l' endroit souhaité - dans le coin supérieur droit de l'image.

Les pointer-events: none; La règle permet aux événements de souris de passer à travers l'icône Développer et d' atteindre l'image .

 .img {hauteur: 150px; largeur: 200px; } .close {background-image: url ("Close-icon.png"); background-repeat: pas de répétition; en bas: 418px; affichage: aucun; hauteur: 32px; à gauche: 462px; marge supérieure: -32px; position: relative; largeur: 32px; } .expand {bas: 125px; marge gauche: -32px; marge-droite: 16px; pointer-events: aucun; position: relative; } 

Sur la carte de l'image, la zone cliquable doit être dans le coin supérieur droit de l'image, juste en dessous de l'icône Développer, et à propos de sa taille. Placer le

Dans le bloc de code ci-dessus, le La balise définit la forme, la taille et l'URI d'une zone lisible à l' intérieur d'une image cliquable. Pour une forme rectangulaire, l'attribut shape prend la valeur rect, et les quatre valeurs de l'attribut coords représentent la distance en pixels entre:

1. le bord gauche de l'image et le bord gauche de la zone de lien
2. le bord supérieur de l'image et le bord supérieur de la zone de liaison
3. le bord gauche de l'image et le bord droit de la zone de lien
4. le bord supérieur de l'image et le bord inférieur de la zone de liaison

La valeur de l'attribut href doit être l' identifiant de hachage de l'image (c'est pourquoi l'image doit avoir un id ).

4. Liez l'image à la carte d'image

Ajoutez l'attribut usemap à l'image afin de le lier à l'image cliquable . Sa valeur doit être la représentation de hachage de l'attribut name du

 Comment fonctionne le bouton Fermer 
Lorsque le bouton Fermer a été ajouté en tant qu'image d'arrière-plan (étape 2) et qu'il s'agit en fait d'une balise avec l' href=# (étape 1), il est supprimé lorsque l'utilisateur clique sur l'identificateur de fragment à la fin de l'URI. Par conséquent, il supprime également la pseudo-classe :target de l'image, et l'image revient à sa taille précédente .
Maintenant, l'effet zoom-sur-clic CSS-only est fait, consultez la démo ci-dessous, ou lisez un peu plus sur la théorie derrière les images dans la section suivante.
 Informations générales: pourquoi 
À présent, vous comprenez certainement que la chose la plus importante pour que cette solution CSS fonctionne est de cibler l'image en utilisant l' href="#imgid", ce qui pourrait également être fait en utilisant la balise au lieu de l'image.
Cela peut être vrai, cependant quand il s'agit d'images, en utilisant le 
La valeur default de l'attribut shape crée une zone de lien rectangulaire qui couvre toute l'image . Si vous deviez l'utiliser à la place, vous devrez le coder pour couvrir l'image, et vous devrez peut-être aussi utiliser un élément wrapper dans le même but.
Pour parler également des mises en garde de cette solution, la propriété CSS pointer-events (utilisée à l'étape 2) est supportée par Internet Explorer uniquement à partir de la version 11 .
Pour prendre en charge les navigateurs IE avant cela, vous pouvez soit utiliser au lieu de 







        

          
          

		  
Regard sur l'analyse de cohorte dans Google Analytics
            
Google Reports est l'un des outils d'analyse les plus simples, mais aussi les plus utilisés et les plus efficaces parmi les webmasters exigeants. L'un des rapports récents ajoutés sous Google Analytics est le rapport d'analyse de cohorte .Ce rapport est extrêmement utile pour les propriétaires d'entreprise car il permet de découvrir les faits essentiels qui aident à comprendre le comportement du client et comment les conserver pour augmenter les profits . Bien 
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
Comment télécharger et ajouter des métadonnées HDR sur YouTube
            
Après une longue et longue attente, YouTube a enfin déployé un support pour les vidéos High Dynamic Range (HDR). Vous pouvez regarder ou télécharger des vidéos HDR sur la plate-forme à condition que la vidéo réponde à certaines exigences.Si vous voulez télécharger une vidéo HDR sur YouTube, la première chose à faire est de s'assurer que la vidéo contient les métadonnées HDR dans le codec ou le conteneur .Ajout de métadonné
			
(Conseils techniques et de conception)