TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer des effets de légende d’image CSS ?

1

Lorsque vous téléchargez une image sur un serveur, elle possède des propriétés telles que l’URL, le titre, la légende, le texte alternatif et la description. Cependant, vous ne pouvez voir l’image et la légende que sur le site Web publié. Généralement, les webmasters se concentrent sur la mise en valeur de l’image et oublient l’importance de la légende. Dans cet article, nous allons vous montrer comment créer des effets de légende d’image CSS pour présenter vos légendes d’image de manière attrayante.

Apprendre WordPress : Découvrez plus de 400 tutoriels WordPress gratuits.

Effet de légende d’image CSS

Les widgets ressembleront à ci-dessous.

Légende de l’image – Style de glissement vers le bas

Faites glisser la légende vers le bas. Lien possible.

Légende de l’image – Style de division horizontale

Légende de style fractionné Horizontl.

Légende de l’image – Style de fractionnement vertical

Légende de style fractionné vertical

Légende de l’image – Style de diapositive vers le haut

Légende de l’image coulissante

4 styles différents

Comme vous pouvez le voir dans la démo, vous pouvez créer quatre effets différents pour créer la légende de l’image.

  • Glisse vers le bas
  • Division horizontale
  • Division verticale
  • Glisser vers le haut

HTML pour les effets de légende d’image

Expliquons d’abord la partie HTML avec effet slide down, afin qu’il soit facile de comprendre la partie CSS. Vous trouverez ci-dessous le code HTML pour l’effet de glissement vers le bas.

<div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div>

Il a les classes CSS suivantes :

  • common – il s’agit de l’ensemble de styles général applicable aux quatre effets.
  • slidedown – c’est le style défini pour créer un effet de glissement vers le bas. Pour les trois autres effets, nous avons utilisé les classes CSS split-horiz, split-vert et slideup. Vous pouvez simplement remplacer cette classe pour obtenir l’effet différent.
  • pic-caption – c’est la classe qui définit l’effet lié à la légende de l’image.

Remarque : La taille de l’image 300 × 300 px est utilisée afin qu’aucun ajustement supplémentaire ne soit requis sur les appareils mobiles.

CSS pour les effets de légende d’image

Dans le code HTML ci-dessus, nous avons utilisé le fichier "imagecaption.css" pour importer tous les CSS requis à partir d’un fichier externe. Vous trouverez ci-dessous le CSS pour l’effet de glissement et vous pouvez télécharger les fichiers CSS et HTML complets en cliquant sur le bouton ci-dessous.

/* General Style */ .common{ margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; } .common::before, .common::after{ content: ''; width: 100%; height: 100%; background: black; position: absolute; opacity: 0.3; top: 0; left 0; -moz-transform: translate3d(0, -100%, 0); -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; } .pic-caption { position: absolute; text-align: center; background: lightyellow; z-index: 999; width: 100%; max-height: 100%; overflow: hidden; top: 50%; -webkit-transform: translate3d(-100%, -50%, 0); transform: translate3d(-100%, -50%, 0); -webkit-transition: all 0.5s; transition: all 0.5s; line-height: 30px; font-size: 16px; } .pic-caption a{ text-decoration: none; } img { display: block; } /* Slidedown Caption */ .slidedown:hover::before{ -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slidedown:hover .pic-caption{ opacity: 1; -moz-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; -moz-transition-delay: 0.5s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; }
  • Dans la section de style général, nous avons créé des blocs en ligne pour afficher chaque bloc d’image.
  • Les pseudo éléments (::before et ::after) sont utilisés pour créer l’effet de curseur sur l’image.
  • Vous ne pouvez voir la légende qu’au survol et elle est invisible lors du chargement de la page.
  • La classe "pic-caption" attribue une couleur jaune clair pour la légende et charge la légende à 50 % à partir du haut de la position de l’image.
  • La transition et la transformation CSS permettent de faire glisser la légende de gauche à droite de l’image.
  • La section sous "Slide down caption" permet d’afficher le curseur, puis la légende à l’aide des propriétés de transformation et de transition CSS.

Utilisation sur votre page Web

Téléchargez le fichier zip "Image Caption Effects.zip" contenant les codes HTML et CSS complets pour les quatre styles d’effets de légende d’image.

L’archive zip contient deux fichiers «imagecaption.css» et «Imagecaption.html ».

  • Téléchargez le fichier CSS dans le même dossier de votre HTML ou fournissez le lien complet vers le fichier CSS en code HTML.
  • Vous pouvez également insérer le CSS dans la section head du HTML à l’aide de balises ….
  • Intégrez le code HTML entre les balises body de votre page Web.
  • Vous ne pouvez utiliser que la section HTML div pertinente pour l’effet particulier.

Le code HTML complet pour les quatre styles devrait ressembler à ci-dessous :

<!DOCTYPE html> <html> <head> <title>CSS Image Caption Effects</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="imagecaption.css"> </head> <body> <div class="common slidedown"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slidedown"> <div class="pic-caption">Slide down caption. <a href="#">Link</a> possible.</div> </div> <div class="common split-horiz"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Horizontal"> <div class="pic-caption">Horizontl Split Style Caption.</div> </div> <div class="common split-vert"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Split Vertical"> <div class="pic-caption">Vertical Split Style Caption</div> </div> <div class="common slideup"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88498-613217814367a.jpg" width="300" height="300" alt="Image Caption Slideup"> <div class="pic-caption">Image Slide Up Caption</div> </div> </body> </html>

Source d’enregistrement: webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails