Reines CSS, um bei der Textbeschreibung einen halbtransparenten Effekt zu erzielen, wenn die Maus darauf platziert wird (unbedingt für Anfänger lesen)

Die Wirkung ist wie folgt:

Beispiel 1

Beispiel 2: Am Beispiel 1 [Hochzeitsplanung]

HTML:

<div Klasse="itemInWorks" >
   Hochzeitsplanung
       Status: Wird abgeschlossen<br>
       Vollstrecker: Zhang San<br>
       Frist: 15.03.2020
   </div>
</div>

CSS:

/*Äußerer Div-Teil*/
.itemInWorks{
    Breite: 180px;
    Höhe: 130px;
    border-radius:5px;/*abgerundete Ecken*/
    Schriftgröße: 18px;
    Schriftstärke: 600;
    Farbe: dunkelgrau;
    text-align: center;/*Der Text „Hochzeitsplanung“ wird horizontal zentriert*/
    Zeilenhöhe: 50px;/*Der Text „Hochzeitsplanung“ ist vertikal zentriert*/
    Hintergrund: URL ('Bild/Werksbild/4.jpg');
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundgröße: 180px 130px;
    Box-Shadow: #909090 0px 0px 10px;/*umgebender Schatten*/
    /*Das Obige wird nach persönlichen Wünschen angepasst*/
    Überlauf: versteckt;
    Position: relativ;
}
/*halbtransparenter Teil*/
.itemInWorks .mask{
    Höhe: 80px;
    Breite: 172px;
    Farbe: #f5f1e5;
    Zeilenhöhe: 23px;
    Textausrichtung: links;
    Polsterung links: 8px;
    Rahmenradius: 2px 2px 5px 5px;
    Schriftgröße: 14px;
    Schriftstärke: 300;
    /*Das Obige wird nach persönlichen Wünschen angepasst*/
    Position: absolut;
    top:130px;/*Wenn die Maus nicht losgelassen wird, der Abstand zwischen dem höchsten Punkt des halbtransparenten Teils und der Oberseite des äußeren Divs*/
    Hintergrundfarbe: rgba (0,0,0,0,5);/*Transparenz*/
    Übergang: oben 0,5 s, Ein-Aus;/*Ändern Sie die obere Eigenschaft, schließen Sie sie in 0,5 Sekunden ab, beginnen Sie langsam und enden Sie langsam*/
}
.itemInWorks:hover .mask{
    top:50px ;/*Wenn die Maus oben platziert wird, der Abstand von der Oberseite des äußeren Divs zum höchsten Punkt der Folie*/
}

Vollständiger Code:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
</Kopf>
<Stil>
    .itemInWorks{
        Breite: 180px;
        Höhe: 130px;
        Rahmenradius: 5px;
        Schriftgröße: 18px;
        Schriftstärke: 600;
        Farbe: dunkelgrau;
        Textausrichtung: zentriert;
        Zeilenhöhe: 50px;
        Hintergrund: URL ('Bild/Werksbild/4.jpg');
        Hintergrundwiederholung: keine Wiederholung;
        Hintergrundgröße: 180px 130px;
        Kastenschatten: #909090 0px 0px 10px;
        Überlauf: versteckt;
        Position: relativ;
    }
    /*halbtransparenter Teil*/
    .itemInWorks .mask{
        Höhe: 80px;
        Breite: 172px;
        Farbe: #f5f1e5;
        Zeilenhöhe: 23px;
        Textausrichtung: links;
        Polsterung links: 8px;
        Rahmenradius: 2px 2px 5px 5px;
        Schriftgröße: 14px;
        Schriftstärke: 300;
        Position: absolut;
        oben: 130px;
        Hintergrundfarbe: RGBA (0,0,0,0,5);
        Übergang: obere 0,5 s leichtes Ein- und Aussteigen;
    }
    .itemInWorks:hover .mask{
        oben: 50px;
    }
</Stil>
<Text>
<div Klasse="itemInWorks" >
    Hochzeitsplanung
        Status: Wird abgeschlossen<br>
        Vollstrecker: Zhang San<br>
        Frist: 15.03.2020
    </div>
</div>
</body>
</html>

Zusammenfassen

Oben finden Sie eine Einführung des Herausgebers in die reine CSS-Textbeschreibung, wie Sie einen durchscheinenden Effekt erzielen, wenn Sie die Maus auf den Bildschirm bewegen (ein Muss für Anfänger). Ich hoffe, es wird allen helfen!

<<: So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)

>>: Der Inhalt des häufig verwendeten Eingabetextfelds wird automatisch vertikal zentriert und der Standardeingabeaufforderungstext ist leer, wenn darauf geklickt wird