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 







        

          
          

		  
Comment utiliser le stockage hors connexion HTML5 sur votre site Web
            
Outre de nouveaux éléments en HTML5, cette nouvelle technologie web nous offre le stockage hors ligne . Il existe plusieurs types de stockage hors connexion et dans cet article, nous discuterons spécifiquement de sessionStorage et localStorage. Le stockage hors ligne nous permet d'enregistrer des données dans le navigateur de l'utilisateur et de faire fonctionner nos applications ou jeux web sans connexion (pour une période de temps).Dans
			
(Conseils techniques et de conception)
          
        
      

        

          
          

		  
14 livres électroniques informatifs et gratuits pour les concepteurs de sites Web
            
Cherchez-vous à acquérir un peu d'expérience en conception web, codage ou typographie? Heureusement pour nous, nous n'avons plus à passer par des livres longs et ennuyeux pour commencer à devenir un concepteur de sites Web. Il y a maintenant beaucoup de bons livres électroniques disponibles qui vous fourniront des conseils et des exemples pour vous aider à vous lancer dans le web design.À cett
			
(Conseils techniques et de conception)