Beispiel:CSS3 transition2.html
<!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>transition-delay</title> <style> .galerie figure { background: white; border: 10px solid white; box-shadow: 1px 1px 2px grey; float: left; height: 309px; margin: 10px; overflow: hidden; position: relative; text-align: center; width: 412px; }
figure img { transition: all 0.2s ease-in; }
figcaption { background-color: rgba(0,0,0,0.3); font-size: 80%; height: 309px; margin: 0; opacity: 0; padding: 30px 0 0; width: 412px; transform-origin: bottom right; transform: translate(0px, -379px) rotate(180deg); transition: all 0.2s 0.4s ease-in-out; }
figure:focus figcaption, figure:hover figcaption { opacity: 1; transition-delay: 0s; transform: translate(0px, -379px) rotate(0deg); }
figure h2 { background: rgba(0, 0, 0, 0.6); color: white; font-size: 1.5em; margin: 0px 0 0; padding: 1em; position: relative; text-align: center; text-transform: uppercase; transform: translateY(-200px); transition: all 0.3s ease-in-out; }
figure:focus h2, figure:hover h2 { transform: translateY(0px); transition-delay: 0.4s; }
figure p { color: white; font-family: Georgia,serif; font-style: italic; padding: 10px 20px 20px; position: relative; opacity: 0; text-align: center; transform: translateX(200px) rotate(90deg); transition: all 0.4s ease-in-out; }
figure:focus p, figure:hover p { opacity: 1; transform: translateX(0px) rotate(0deg); transition-delay: 0.2s; }
figure a.info { position: relative; transform: translateY(-200px); transition: all 0.2s ease-in-out; }
figure:focus a.info, figure:hover a.info { color: currentColor; background: rgba(255,255,255,0.5); border: 1px solid currentColor; font-size:1.2em; text-decoration: none; border-radius: 20%/50%; padding: 0.5em 2em; transform: translateY(0px); transition-delay: 0.3s; }
figure:focus a.info:after, figure:focus a.info:before, figure:hover a.info:after, figure:hover a.info:before { height: 1em; position: absolute; top: 0.5em; width: 1em; }
figure:focus a.info:after, figure:hover a.info:after { content: " … "; right: 0.5em; }
figure:focus a.info:before, figure:hover a.info:before { content: "→"; left: 0.5em; }
/* clearfix */ main:after { clear: left; content: " "; display: block; } </style> </head> <body>
Inhaltsverzeichnis
Verwendung von transition-delay
Discover Alaska!
<section class="galerie"> <figure tabindex=0> <img src="http://wiki.selfhtml.org/images/e/ec/Alaska-denali.jpg" alt="Denali"> <figcaption>
Denali NP
Der Mount McKinley oder Denali ragt mit 6194 Metern Höhe aus den in Alaska eher niedrigen Rockies heraus und ist bereits aus 120km Entfernung sichtbar.
<a href="#" class="info">mehr</a> </figcaption> </figure>
<figure tabindex=0> <img src="http://wiki.selfhtml.org/images/3/3e/Alaska-kennecott.jpg" alt="zerfallene Eisenbahnbrücke"> <figcaption>
Kennecott Mine
Die Kennecott-Mine ist eine Geisterstadt
im Wrangell-St.Elias Nationalpark.
Er ist nur über die McCarthy Road
erreichbar, die auf der Trasse der
stillgelegten Eisenbahn verläuft.
Schwellennägel verursachten bis in die
80er Jahre häufig platte Reifen; heute
jedoch gibt es sie nur noch in
Andenkenläden.
<a href="#" class="info">mehr</a> </figcaption> </figure>
<figure tabindex=0> <img src="http://wiki.selfhtml.org/images/0/04/Alaska-top-of-the-world.jpg" alt="Herbststimmung"> <figcaption>
Top of the World Highway
Der Top of the World-Highway verbindet
Dawson City in Yukon mit Alaska und führt
durch unberührte Tundra.
Hauptreisezeit in Alaska ist Juni bis August, wobei Ende August schon die herbstliche Laubfärbung beginnt.
<a href="#" class="info">mehr</a> </figcaption> </figure>
<figure tabindex=0> <img src="http://wiki.selfhtml.org/images/5/57/Alaska-rockies.jpg" alt="Rockie Mountains"> <figcaption>
Rocky Mountains
Die Rocky Mountains sind, wie der Name schon sagt, "felsige Gebirge", so dass die kristallklaren Bäche und Seen bei Windstille zu reflektierenden Spiegeln werden.
<a href="#" class="info">mehr</a> </figcaption> </figure> </section>
</body> </html>
