Beispiel:Bilder präsentieren-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<title>Bildunterschriften mit figcaption präsentieren</title>
		<style>
			figure, figcaption {
				margin: 0;
				padding: 0;
			}

			figure.einzel {
				overflow:hidden;
				position: relative;
				display: inline-block;
				width: 32.8%;
			}

			figure img {
				width: 100%;
				display: block;
			}

			figcaption {
				position: absolute;
				bottom: 0;
				width: 100%;
				text-align: center;
				line-height: 3em;
				color: white;
				background: rgba(0,0,0,0.5);
			}

			figcaption {
				position: absolute;
				bottom: -3em;      /* gilt für das erste (linke) Beispiel */  
				text-align: center;
				line-height: 3em;
				white-space: nowrap;
				color: white;
				background: rgba(0,0,0,0);
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}

			figure.mitte figcaption {   
				width: 0;
				left:50%;
			} 

			/* gilt für das letzte (rechte) Beispiel */
			figure.rechts figcaption {
				width: 0;
				bottom: 50%;
				left: 50%;
				overflow: hidden;
			} 

			figure:focus figcaption, 
			figure:hover figcaption {	
				bottom: 0;
				left:0;
				width: 100%;
				background: rgba(0,0,0,0.5);
			}

			/* das Fragezeichen als Pseudo-Element */
			figure:before {
				content: "?"; 
				position: absolute; 
				bottom: 1em;
				left: 1em;
				background: rgba(255,255,255,0.5);
				color: black;
				width: 1.5em;
				height: 1.5em;
				border-radius: 1em;
				text-align: center;
				font-size: 1.5em;
				line-height: 1.5em;
				-webkit-transition: all 1s ease;
				transition: all 1s ease;
			}

			figure:focus:before,
			figure:hover:before {
				background: rgba(255,255,255,0);
				color: rgba(0,0,0,0);
			}

			@media only screen and (max-width:800px) {
				body{
					width: 100%;
					margin: 2% 0;
					padding: 1%;
				}

				figure.einzel {
					width: 48%;
				}
			}  

			@media only screen and (max-width:600px) {
				figure.einzel {
					width: 100%;
				}
			}      
		</style>
	</head>
	<body>
		<h1>einschwebende Bildunterschriften</h1>
		<main>
			<p>Probieren Sie die unterschiedlichen :hover-Effekte bei den einzelnen Bildern aus!</p>
			<figure class="einzel">
				<img src="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
				<figcaption>Nürnberger Tor</figcaption>
			</figure>
			<figure class="einzel mitte">
				<img src="//wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
				<figcaption>Brücke über die Pegnitz</figcaption>
			</figure>    
			<figure class="einzel rechts">
				<img src="//wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
				<figcaption>Mauermühle und Judenturm</figcaption>
			</figure>
		</main>
	</body>
</html>