Kuinka luoda CSS -kuvatekstitehosteita?

Kun lataat kuvan palvelimelle, sillä on ominaisuuksia, kuten URL -osoite, otsikko, kuvateksti, vaihtoehtoinen teksti ja kuvaus. Voit kuitenkin nähdä vain kuvan ja kuvatekstin julkaistulla verkkosivustolla. Yleensä verkkovastaavat keskittyvät esittelemään kuvaa ja unohtavat tekstityksen tärkeyden. Tässä artikkelissa näytämme sinulle, kuinka luoda CSS -kuvatekstitehosteita kuvatekstien esittämiseksi houkuttelevalla tavalla.

Opi WordPress: Tutustu yli 400 ilmaiseen WordPress -opetusohjelmaan.

CSS -kuvatekstitehoste

Widgetit näyttävät alla olevilta.

Kuvateksti – Slide Down Style

Liu’uta tekstitys alas. Linkki mahdollinen.

Kuvateksti – vaakasuora jaettu tyyli

Horizontl Split Style Caption.

Kuvateksti – pystysuora jaettu tyyli

Pystysuora jaettu tyylinen kuvateksti

Kuvateksti – liukuva tyyli

Kuvan diaesitys

4 eri tyyliä

Kuten voit nähdä esittelyssä, voit luoda kuvatekstin neljällä eri tehosteella.

• Liukua alas
• Vaakajako
• Pystyjako
• Liu’uta ylös

Kuvatekstitehosteiden HTML

Selitämme ensin HTML -osan dia alas -tehosteella, jotta CSS -osa on helppo ymmärtää. Alla on dia alaspäin tehosteen HTML.

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

Sillä on seuraavat CSS -luokat:

• yhteinen – tämä on yleinen tyylisarja, jota sovelletaan kaikkiin neljään tehosteeseen.
• liukuva – tämä on tyylijoukko alaspäin tehosteen luomiseksi. Muita kolmea tehostetta varten olemme käyttäneet split-horiz, split-vert ja slideup CSS -luokkia. Voit vain korvata tämän luokan saadaksesi erilaisen vaikutuksen.
• pic-caption- tämä luokka määrittelee kuvan tekstitykseen liittyvän vaikutuksen.

Huomautus: Kuvakokoa 300 × 300 px käytetään, jotta mobiililaitteisiin ei tarvita lisäsäätöjä.

Kuvatekstitehosteiden CSS

Yllä olevassa HTML -koodissa olemme käyttäneet "imagecaption.css" -tiedostoa tuodaksemme kaikki tarvittavat CSS -tiedostot ulkoisesta tiedostosta. Alla on CSS dia -alas -tehosteelle ja voit ladata täydelliset CSS- ja HTML -tiedostot napsauttamalla alla olevaa painiketta.

/* 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;
}

• Yleisen tyylin osiossa olemme luoneet upotettuja lohkoja kunkin kuvalohkon näyttämistä varten.
• Pseudo -elementtejä (:: ennen ja :: jälkeen) käytetään luomaan liukusäätimen vaikutus kuvaan.
• Näet kuvatekstin vain hiirellä ja se on näkymätön, kun sivu latautuu.
• "Kuvateksti" -luokka määrittää vaalean keltaisen värin kuvatekstille ja lataa kuvatekstin 50% kuvan sijainnin yläosasta.
• CSS -siirtyminen ja muuntaminen auttaa liu’uttamaan kuvatekstiä kuvan vasemmalta oikealle.
• "Slide down caption" -kohdan osio auttaa näyttämään liukusäätimen ja sitten kuvatekstin CSS -muunnos- ja siirtymäominaisuuksien avulla.

Käyttö verkkosivullasi

Lataa zip -tiedosto "Image Caption Effects.zip”, joka sisältää täydelliset HTML- ja CSS -koodit kaikille neljälle kuvatekstitehosteiden tyylille.

Zip -arkistossa on kaksi tiedostoa “imagecaption.css” ja “Imagecaption.html”.

• Lataa CSS -tiedosto samaan HTML -kansioon tai anna täydellinen linkki CSS -tiedostoon HTML -koodina.
• Voit myös lisätä CSS: n HTML -otsikkoon… -tagien avulla.
• Upota HTML -koodi verkkosivusi body -tunnisteiden väliin.
• Voit käyttää vain tietyn tehosteen kannalta relevanttia HTML -div -osiota.

Kaikkien neljän tyylin täydellisen HTML -koodin pitäisi näyttää tältä:

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