Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Aujourd’hui, nous allons vous montrer comment agrandir ou agrandir une image en la survolant. L’effet est similaire à celui typique Boite à lumière ou modalités, mais avec une différence majeure, Nous n’utiliserons que du CSS, pas de JavaScript. Une solution simple et facile quand on veut juste afficher une image avec un peu plus de détails sans se soucier de savoir s’il faut charger une bibliothèque ou des ressources externes pour le faire.

Alors préparez le matériel (comme si c’était un tutoriel de bricolage: D) et avant de le toucher CSSnous avons besoin de deux versions de la même image que nous voulons utiliser, un en taille miniature (où nous flotterons) et une autre grandeur nature ou taille agrandie affichée sous forme de zoom. Cependant, si l’apparence correcte de la vignette n’est pas importante pour vous, vous pouvez ignorer ce point et la même image pour les deux emplacements et laisser le navigateur se redimensionner tant que nous utilisons l’image correctement CSS réactif pour les images. Nous sauvegardons donc un appel supplémentaire vers le serveur 😉

Exemple pratique de trois images agrandies avec CSS

Positionnez l’image agrandie en utilisant CSS

L’effet est que l’image est affichée dans sa taille d’origine au-dessus de la vignette. On peut choisir de l’afficher en bas ou même sur les côtés. Cependant, comme nous ne savons pas à l’avance si nous aurons suffisamment d’espace en raison de la résolution de l’écran de l’utilisateur ou moins de contenu, nous préférons la position en haut.

Le code HTML est très simple, comme dans le illustration de symbole animéNous avons besoin d’un conteneur avec deux éléments subordonnés, d’une part la vignette et d’autre part l’image de taille d’origine contenue dans un élément span::

<div class="container-enlarge">
    <img src="http://example.com/imagen-reducida.png">
    <span><img src="http://example.com/imagen-ampliada.png"></span>
</div>

Il est important que le CSS positionne l’élément span qu’absolu avec certaines coordonnées en dehors de la zone de navigation et modifiez ces coordonnées lorsque vous déplacez la souris sur le conteneur, dans ce cas l’élément div avec la classe .container-enlarge::

.container-enlarge {
    display: inline-block;
    position: relative;
    margin: 15px;
}
.container-enlarge > img {
    height: auto;
    max-width: 100%;
    width: 150px;
    border-radius: 5px;
}
.container-enlarge span {
    position: absolute;
    top: -9999em;
    left: -9999em;
}
.container-enlarge:hover span {
    top: -320px;
    left: -75px;
    width: 300px;
}

Les dimensions et l’emplacement de l’article span Ils sont définis à l’avance car nous connaissons la résolution qu’aura l’image agrandie.

Puisque nous avons sélectionné plusieurs images dans cet exemple, nous les avons rassemblées dans le conteneur .images-container et centré avec text-align: center;Cependant, c’est déjà une étape facultative.

Solutions simples à des problèmes simples avec CSS

Parfois dans création de sites web Nous compliquons notre vie avec des bibliothèques externes et des plugins étendus lorsque nous sommes confrontés à des problèmes ou à des exigences peut résoudre de manière plus simple et plus facile. Cet exemple d’agrandissement d’images avec CSS ne provient que d’un cas réel où le client devait mettre des logos et des sceaux de qualité dans le pied de page de la page et le visiteur a eu la possibilité de voir plus à l’intérieur en passant la souris sur chacun d’eux. dit logo.

Dans notre première approche, nous avons trouvé une bibliothèque JS que nous pourrions utiliser pour créer cet effet. Il faudrait alors intégrer la bibliothèque, modifier le HTML pour ajouter les classes requises, et enfin, concevoir le CSS pour personnaliser les styles fournis par la bibliothèque par défaut. Par mesure de sécurité, la bibliothèque a été payée en supplément (coût supplémentaire pour le client) et impliquerait un appel supplémentaire au serveur, ce qui ralentit la charge sur le Web et aggrave Internet. UX.

Avec la solution CSS, il suffit d’ajouter les lignes détaillées à la feuille de style et de changer le code HTML. Cela permet d’économiser des coûts pour le client et sans cette modification, cela ajoute du poids et de la charge au Web.

Incidemment, les photos de la démo proviennent de plus que de projets et d’articles intéressants, que je vous invite à visiter et à commenter SiloMag # 16, SiloMag # 04 et SiloMag # 01, dans cet ordre. J’espère que vous avez été utile!



Source link

Recent Posts