Beispiel:CSS3 transition3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <title>Pseudo-Animation von Keyword-Eigenschaften</title> <style> figure { 

 position:relative;
 margin: 0;

} .rehe { 

 width: 150px;
 position:absolute;
 top: 180px; left: 120px;
 transition-duration: 1s;
 transition-property: opacity;

} .rehe>img { width:100%;}

.rehe.regular { 

 mix-blend-mode: saturation;
 z-index: 2;

} .rehe.hover { 

 opacity: 0;
 mix-blend-mode: normal;

} .rehe.regular:is(:hover,:focus) ~ .rehe { 

 opacity: 1;

} .rehe.regular:is(:hover,:focus) { 

 opacity: 0;

} </style> </head> <body>

Pseudo-Animation von Keyword-Eigenschaften

Rehe im Wald

<figure> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/NSG_Landschaft_um_den_Heppenstein_2023b.jpg/640px-NSG_Landschaft_um_den_Heppenstein_2023b.jpg" alt="lichter Wald mit Gras"> <img class="rehe regular" tabindex=0 src="https://wiki.selfhtml.org/images/5/53/Rehe.png"> <a class="rehe hover" href="https://de.wikipedia.org/wiki/Reh"> 

 <img src="https://wiki.selfhtml.org/images/5/53/Rehe.png">

</a> </figure>

Quellen

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_transition3.html&oldid=98462“