Beispiel:CSS-grid-square-gallery-1.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" >
	<title>Bilderwand</title>
	<style>
.square-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
}

.square-container::before {
  content: '';
  height: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.square-container > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

.square-container > * {
  background: rgb(0 0 0 / 0.1);
  border: thin solid transparent;
  position: relative;
}

.square-container > *:focus,
.square-container > *:hover {
  border: thin solid blue;
  opacity: .75;
}

.square-container img { 
  position:absolute;
  top:0;
  left:0;
  object-fit: cover; 
  width:100%; 
  height: 100%;  }

#blog,
#kontakt {
  background: url(https://upload.wikimedia.org/wikipedia/commons/a/a1/Niccolo_de_Niccoli_italic_handwriting.jpg);
  background-size:cover;
  display:flex; 
  align-items:center; 
  justify-content:center;
  font: 3rem bold; 
  text-decoration: none;
  color: red;
 }
 
#kontakt {
  grid-column: -2 / -1;  
 }

*, ::before, ::after { 
  box-sizing: border-box; 
}		
	

</style>
	</head>
	<body>
<h1>Bilderwand</h1>
<div class="square-container">
	<a id="blog" href="#">
		Blog
	</a>
    <a id="kontakt" href="#">
		Kontakt
	</a>
	
	<a id="machupicchu" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Machu_Picchu_%28Peru%29.jpg/320px-Machu_Picchu_%28Peru%29.jpg" alt="Machu Picchu (Peru)" >
	</a>

	<a id="chichenitza" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Kukulc%C3%A1n-Pyramide_in_Chichen_Itza.jpg/800px-Kukulc%C3%A1n-Pyramide_in_Chichen_Itza.jpg" alt="Chichen Itza (Mexiko)" >
	</a>
    
	<a id="empire" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Empirestatebuildingfrombrooklynnewyork.jpg/399px-Empirestatebuildingfrombrooklynnewyork.jpg" alt="Empire State Building (New York, USA)">    
    </a> 
      
	<a id="chinwall" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Greatwall_large.jpg" alt="chinesische Mauer (China)">
    </a>
    
	<a id="christus" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Rio_de_Janeiro_Helicoptero_47_Feb_2006_%28cuadrado%29.jpg" alt="Christus-Staute (Rio, Brasilien)" >
	</a>
    
	<a id="colosseo" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/800px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg" alt="Colosseum (Rom, Italien)">    
    </a> 
      
	<a id="petra" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Petra_Jordan_BW_43_Edit_Alchemist-hp.jpg/790px-Petra_Jordan_BW_43_Edit_Alchemist-hp.jpg" height="100" alt="Petra (Jordanien)">
    </a>
    
	<a id="taj mahal" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Agra%2C_Taj_Mahal_LCCN95505064.jpg/311px-Agra%2C_Taj_Mahal_LCCN95505064.jpg" alt="Taj Mahal (Indien)">
	</a>

	<a id="pyramide" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/The_Great_Sphinx%2C_Pyramids_of_Gizeh-1839%29_by_David_Roberts%2C_RA.jpg/320px-The_Great_Sphinx%2C_Pyramids_of_Gizeh-1839%29_by_David_Roberts%2C_RA.jpg" alt="Sphinx + Pyramiden (Ägypten)">
    </a>
    
	<a id="atomium" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Atomium_de_Bruxelles.jpg/320px-Atomium_de_Bruxelles.jpg" alt="atomium (Brüssel, Belgien)">
	</a>
    
	<a id="uluru" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Petermann_Ranges_%28AU%29%2C_Uluru-Kata_Tjuta_National_Park%2C_Uluru_--_2019_--_3701.jpg/640px-Petermann_Ranges_%28AU%29%2C_Uluru-Kata_Tjuta_National_Park%2C_Uluru_--_2019_--_3701.jpg" alt="Uluru (Australien)">
	</a>
	<a id="Neuschwanstein" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/20130718ger.jpg/800px-20130718ger.jpg" alt="Neuschwanstein (Deutschland)">
	</a>
	<a id="machupicchu" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Machu_Picchu_%28Peru%29.jpg/320px-Machu_Picchu_%28Peru%29.jpg" alt="Machu Picchu (Peru)" >
	</a>

	<a id="chichenitza" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Kukulc%C3%A1n-Pyramide_in_Chichen_Itza.jpg/800px-Kukulc%C3%A1n-Pyramide_in_Chichen_Itza.jpg" alt="Chichen Itza (Mexiko)" >
	</a>
    
	<a id="empire" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Empirestatebuildingfrombrooklynnewyork.jpg/399px-Empirestatebuildingfrombrooklynnewyork.jpg" alt="Empire State Building (New York, USA)">    
    </a> 
      
	<a id="chinwall" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/d/db/Greatwall_large.jpg" alt="chinesische Mauer (China)">
    </a>
    
	<a id="christus" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Rio_de_Janeiro_Helicoptero_47_Feb_2006_%28cuadrado%29.jpg" alt="Christus-Staute (Rio, Brasilien)" >
	</a>
    
	<a id="colosseo" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Colosseum_in_Rome%2C_Italy_-_April_2007.jpg/800px-Colosseum_in_Rome%2C_Italy_-_April_2007.jpg" alt="Colosseum (Rom, Italien)">    
    </a> 
      
	<a id="petra" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Petra_Jordan_BW_43_Edit_Alchemist-hp.jpg/790px-Petra_Jordan_BW_43_Edit_Alchemist-hp.jpg" height="100" alt="Petra (Jordanien)">
    </a>
    
	<a id="taj mahal" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Agra%2C_Taj_Mahal_LCCN95505064.jpg/311px-Agra%2C_Taj_Mahal_LCCN95505064.jpg" alt="Taj Mahal (Indien)">
	</a>

	<a id="pyramide" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/The_Great_Sphinx%2C_Pyramids_of_Gizeh-1839%29_by_David_Roberts%2C_RA.jpg/320px-The_Great_Sphinx%2C_Pyramids_of_Gizeh-1839%29_by_David_Roberts%2C_RA.jpg" alt="Sphinx + Pyramiden (Ägypten)">
    </a>
    
	<a id="atomium" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Atomium_de_Bruxelles.jpg/320px-Atomium_de_Bruxelles.jpg" alt="atomium (Brüssel, Belgien)">
	</a>
    
	<a id="uluru" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Petermann_Ranges_%28AU%29%2C_Uluru-Kata_Tjuta_National_Park%2C_Uluru_--_2019_--_3701.jpg/640px-Petermann_Ranges_%28AU%29%2C_Uluru-Kata_Tjuta_National_Park%2C_Uluru_--_2019_--_3701.jpg" alt="Uluru (Australien)">
	</a>
	<a id="Neuschwanstein" href="#">
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/20130718ger.jpg/800px-20130718ger.jpg" alt="Neuschwanstein (Deutschland)">
	</a>

</div>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-square-gallery-1.html&oldid=92902“