TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag CSS -bildtexteffekter?

1

När du laddar upp en bild till en server har den egenskaper som URL, titel, bildtext, alt text och beskrivning. Du kan dock bara se bilden och bildtexten på den publicerade webbplatsen. I allmänhet fokuserar webbansvariga på att visa upp bilden och glömma vikten av bildtext. I den här artikeln kommer vi att visa dig hur du skapar CSS -bildtexter för att visa dina bildtexter på ett attraktivt sätt.

Lär dig WordPress: Kolla in 400+ kostnadsfria WordPress -självstudier.

CSS Image Captions Effect

Widgetarna kommer att se ut nedan.

Bildtext – Skjut ner stil

Skjut ner bildtexten. Länk möjlig.

Bildtext – Horisontell delad stil

Horizontl Split Style Caption.

Bildtext – Vertikal delad stil

Vertikal delad bildtext

Bildtext – Slide Up Style

Bild Slide Up Bildtext

4 olika stilar

Som du kan se i demoen finns det fyra olika effekter du kan skapa bildtexten.

  • Glida ner
  • Horisontell delning
  • Vertikal delning
  • Glid upp

HTML för Image Caption Effects

Låt oss först förklara HTML -delen med glid -ned -effekt, så att det blir lätt att förstå CSS -delen. Nedan finns HTML för glid -ned -effekt.

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

Den har följande CSS -klasser:

  • common – detta är den allmänna stiluppsättningen som gäller för alla fyra effekterna.
  • glidning – det här är stilinställningen för att skapa glid -ned -effekt. För andra tre effekter har vi använt split-horizon, split-vert och slideup CSS-klasser. Du kan bara byta ut den här klassen för att få den olika effekten.
  • pic-caption- detta är klassen som definierar effekten relaterad till bildtext.

Obs: Bildstorlek 300 × 300 px används så att det inte behövs några ytterligare justeringar på mobila enheter.

CSS för bildtexter

I ovanstående HTML -kod har vi använt "imagecaption.css" -fil för att importera all nödvändig CSS från en extern fil. Nedan finns CSS för glid -ned -effekt och du kan ladda ner hela CSS- och HTML -filer genom att klicka på knappen nedan.

/* 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; }
  • Under avsnittet med generell stil har vi skapat inbyggda block för att visa varje bildblock.
  • Pseudo -element (:: före och :: efter) används för att skapa skjutregleringseffekten på bilden.
  • Du kan bara se bildtexten när du svävar och är osynlig när sidan laddas.
  • Klassen "pic-caption" tilldelar ljusgul färg för bildtexten och laddar bildtexten 50% från toppen av bildpositionen.
  • CSS -övergång och transformering hjälper till att skjuta bildtexten från vänster till höger om bilden.
  • Avsnittet under "Slide down caption" hjälper till att visa reglaget och sedan bildtexten med hjälp av CSS -transform och övergångsegenskaper.

Användning på din webbsida

Ladda ner zip -filen “Image Caption Effects.zip" som innehåller de fullständiga HTML- och CSS -koder för alla fyra format för bildtexter.

ZIP -arkivet har två filer "imagecaption.css" och "Imagecaption.html".

  • Ladda upp CSS -filen i samma mapp i din HTML -kod eller tillhandahåll den fullständiga länken till CSS -filen i HTML -kod.
  • Du kan också infoga CSS i huvudavsnittet i HTML -koden med … taggar.
  • Bädda in HTML -koden mellan kroppstaggarna på din webbsida.
  • Du kan bara använda HTML -div -sektionen som är relevant för den specifika effekten.

Den fullständiga HTML -koden för alla fyra stilar ska se ut nedan:

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

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer