TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare effetti di didascalia delle immagini CSS?

0

Quando carichi un’immagine su un server, ha proprietà come URL, titolo, didascalia, testo alternativo e descrizione. Tuttavia, puoi vedere solo l’immagine e la didascalia sul sito web pubblicato. In genere, i webmaster si concentrano sulla presentazione dell’immagine e dimenticano l’importanza della didascalia. In questo articolo ti mostreremo come creare effetti di didascalia delle immagini CSS per mostrare le didascalie delle tue immagini in modo attraente.

Impara WordPress: dai un’occhiata a oltre 400 tutorial gratuiti su WordPress.

Effetto didascalie immagine CSS

I widget appariranno come di seguito.

Didascalia immagine – Stile di scorrimento verso il basso

Scorri la didascalia. Collegamento possibile.

Didascalia dell’immagine – Stile di divisione orizzontale

Didascalia in stile diviso orizzontale.

Didascalia immagine – Stile di divisione verticale

Didascalia in stile divisione verticale

Didascalia immagine – Stile di scorrimento in su

Didascalia di scorrimento dell’immagine

4 stili diversi

Come puoi vedere nella demo, ci sono quattro diversi effetti con cui puoi creare la didascalia dell’immagine.

  • Scorrere verso il basso
  • Divisione orizzontale
  • Divisione verticale
  • Scorrere verso l’alto

HTML per gli effetti di didascalia delle immagini

Spieghiamo prima la parte HTML con l’effetto slide down, in modo che sia facile capire la parte CSS. Di seguito è riportato l’HTML per l’effetto di scorrimento verso il basso.

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

Ha le seguenti classi CSS:

  • common – questo è il set di stili generale applicabile a tutti e quattro gli effetti.
  • slidedown – questo è lo stile impostato per creare l’effetto slide down. Per altri tre effetti abbiamo usato le classi CSS split-horiz, split-vert e slideup. Puoi semplicemente sostituire questa classe per ottenere l’effetto diverso.
  • pic-caption – questa è la classe che definisce l’effetto relativo alla didascalia dell’immagine.

Nota: la dimensione dell’immagine 300×300 px viene utilizzata in modo che non siano necessarie ulteriori regolazioni sui dispositivi mobili.

CSS per gli effetti di didascalia delle immagini

Nel codice HTML sopra abbiamo utilizzato il file "imagecaption.css" per importare tutti i CSS richiesti da un file esterno. Di seguito è riportato il CSS per l’effetto di scorrimento verso il basso e puoi scaricare i file CSS e HTML completi facendo clic sul pulsante in basso.

/* 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; }
  • Nella sezione stile generale, abbiamo creato blocchi in linea per mostrare ogni blocco di immagine.
  • Gli pseudo elementi (::before e ::after) vengono utilizzati per creare l’effetto slider sull’immagine.
  • Puoi vedere la didascalia solo al passaggio del mouse ed è invisibile quando la pagina viene caricata.
  • La classe "pic-caption" assegna il colore giallo chiaro per la didascalia e carica la didascalia al 50% dalla parte superiore della posizione dell’immagine.
  • La transizione e la trasformazione CSS aiutano a far scorrere la didascalia da sinistra a destra dell’immagine.
  • La sezione sotto "Didascalia a scorrimento" aiuta a mostrare il dispositivo di scorrimento e quindi la didascalia utilizzando le proprietà di trasformazione e transizione CSS.

Utilizzo sulla tua pagina web

Scarica il file zip "Image Caption Effects.zip" contenente i codici HTML e CSS completi per tutti e quattro gli stili di effetti di didascalia delle immagini.

L’archivio zip ha due file "imagecaption.css" e "Imagecaption.html".

  • Carica il file CSS nella stessa cartella del tuo HTML o fornisci il link completo al file CSS in codice HTML.
  • Puoi anche inserire il CSS all’interno della sezione head dell’HTML usando i tag ….
  • Incorpora il codice HTML tra i tag del corpo della tua pagina web.
  • Puoi usare solo la sezione HTML div rilevante per il particolare effetto.

L’HTML completo per tutti e quattro gli stili dovrebbe apparire come di seguito:

<!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>

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More