TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage CSS Image Caption Effects?

0

Når du laster opp et bilde til en server, har det egenskaper som URL, tittel, bildetekst, alt tekst og beskrivelse. Imidlertid kan du bare se bildet og bildeteksten på det publiserte nettstedet. Vanligvis fokuserer nettredaktører på å vise frem bildet og glemme viktigheten av bildetekst. I denne artikkelen vil vi vise deg hvordan du lager CSS -bildeteksteffekter for å vise frem bildetekster på en attraktiv måte.

Lær WordPress: Ta en titt på 400+ gratis WordPress -opplæringsprogrammer.

Widgetene vil se ut som nedenfor.

Bildetekst – Skyv ned stil

Skyv ned bildeteksten. Link mulig.

Bildetekst – Horisontal delt stil

Horizontl Split Style Caption.

Bildetekst – Vertikal delt stil

Vertikal delt stiltekst

Bildetekst – Slide Up Style

Bilde Slide Up Caption

4 forskjellige stiler

Som du kan se i demoen, er det fire forskjellige effekter du kan lage bildeteksten.

  • Skli ned
  • Horisontal splittelse
  • Vertikal splitt
  • Skli opp

HTML for Image Caption Effects

La oss først forklare HTML -delen med skyve -ned -effekt, slik at det blir lett å forstå CSS -delen. Nedenfor er HTML for skyve 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ølgende CSS -klasser:

  • vanlig – dette er det generelle stilsettet som gjelder for alle fire effektene.
  • nedfelt – dette er stilen som er angitt for å lage lysbildeeffekt. For andre tre effekter har vi brukt CSS-klasser med split-horizon, split-vert og slideup. Du kan bare bytte ut denne klassen for å få den forskjellige effekten.
  • pic-caption -dette er klassen som definerer effekten knyttet til bildetekst.

Merk: Bildestørrelse 300 × 300 px brukes slik at det ikke er behov for ytterligere justeringer på mobile enheter.

CSS for Image Caption Effects

I HTML -koden ovenfor har vi brukt “imagecaption.css" -fil for å importere all nødvendig CSS fra en ekstern fil. Nedenfor er CSS for lysbildeeffekt, og du kan laste ned hele CSS- og HTML -filene ved å klikke på knappen nedenfor.

/* 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 generell stildel har vi opprettet innebygde blokker for å vise hver bildeblokk.
  • Pseudo -elementer (:: før og :: etter) brukes til å lage skyveeffekten på bildet.
  • Du kan bare se bildeteksten når du holder markøren og er usynlig når siden lastes inn.
  • Klassen "pic-caption" tildeler lysegul farge for bildeteksten og laster bildeteksten 50% fra toppen av bildeposisjonen.
  • CSS -overgang og transformering bidrar til å skyve bildeteksten fra venstre til høyre i bildet.
  • Seksjonen under "Slide down caption" hjelper til med å vise glidebryteren og deretter bildeteksten ved hjelp av CSS -transformasjon og overgangsegenskaper.

Bruk på websiden din

Last ned zip -filen "Image Caption Effects.zip" som inneholder de komplette HTML- og CSS -kodene for alle fire stilene med bildeteksteffekter.

ZIP -arkivet har to filer “imagecaption.css” og “Imagecaption.html”.

  • Last opp CSS -filen i samme mappe i HTML -koden din, eller gi den fullstendige lenken til CSS -filen i HTML -kode.
  • Du kan også sette inn CSS i hodeseksjonen i HTML -koden ved hjelp av … tagger.
  • Bygg inn HTML -koden mellom brødtekstene på websiden din.
  • Du kan bare bruke HTML -div -delen som er relevant for den aktuelle effekten.

Den komplette HTML -koden for alle fire stilene skal se slik ut:

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

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon