Useful CSS Snippets - CSS Grid Layout Image Span

This kind of layout is normally used in a control panel or launch pad interface where you need an overview/snapshot of various data points with the ability to drill down as needed.

I got this code from Brad's youtube video about laying down a full-sized background image behind a CSS grid. It uses a CSS grid (obviously) but also some CSS wizardry including:

· Background images (think "windows in the grid exposing the background image behind")
· CSS animations (transitions)
· A few handy CSS selectors that I normally learn about once a year then promptly forget (not kidding)
· Grid spacing and layout

INSTRUCTIONS: Copy and paste the code below into it's own .html file then run in local browser.
<!doctype html>
    <head>
        <meta charset="UTF-8">
        <title>SANDBOX</title>
        
        <style type="text/css">
            @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

			* {
			  box-sizing: border-box;
			  margin: 0;
			  padding: 0;
			}

			body {
			  background: #333;
			  color: #fff;
			  font-family: 'Roboto', sans-serif;
			}

			h2 {
			  font-size: 45px;
			  font-weight: 300;
			  margin: 10px;
			}

			h2 span {
			  font-size: 30px;
			}

			p {
			  font-size: 20px;
			}

			.container {
			  display: grid;
			  grid-template-columns: repeat(4, 1fr);
			  grid-gap: 10px;
			}

			.container > div {
			  cursor: pointer;
			  height: 210px;
			  background-size: cover;
			  background-attachment: fixed;

			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  justify-content: center;
			  text-align: center;

			  transition: all 0.5s ease-in;
			}

			.container > div:hover {
			  opacity: 0.7;
			  transform: scale(0.98);
			}

			.container > div:nth-of-type(1) {
			  grid-column: 1 / 3;
			}

			.container > div:nth-of-type(6) {
			  grid-column: 3 / 5;
			}

			.container > div:nth-of-type(9) {
			  grid-column: 3 / 5;
			}

			.container > div:nth-of-type(10) {
			  grid-column: 1 / 3;
			}

			.bg1 {
			  background: url('https://i.ibb.co/dBLbrRV/bg1.jpg');
			}

			.bg2 {
			  background: url('https://i.ibb.co/Fb5jb3J/bg2.jpg');
			  color: #333;
			}

        </style>
    </head>
    <body>

	<div class="container">
	  <div class="bg1">
		<h2>16 <span>| 24</span></h2>
		<p>Goals Completed</p>
	  </div>
	  <div class="bg1">
		<h2><i class="fas fa-battery-three-quarters"></i></h2>
		<p>Respiration</p>
	  </div>
	  <div class="bg2">
		<h2><i class="fas fa-running"></i></h2>
		<p>Miles</p>
	  </div>
	  <div class="bg1">
		<h2>36 °</h2>
		<p>Temperature</p>
	  </div>
	  <div class="bg1">
		<h2><i class="fas fa-bed"></i></h2>
		<p>Sleep Keep</p>
	  </div>
	  <div class="bg2">
		<h2>98 <span>bpm</span></h2>
		<p>Heart Rate</p>
	  </div>
	  <div class="bg1">
		<h2>170 <span>lbs</span></h2>
		<p>Weight</p>
	  </div>
	  <div class="bg1">
		<h2>28 <span>%</span></h2>
		<p>Fat Percentage</p>
	  </div>
	  <div class="bg2">
		<h2>118 <span>mgdl</span></h2>
		<p>Blood Glucose</p>
	  </div>
	  <div class="bg2">
		<h2>680 <span>kcal</span></h2>
		<p>AVG Consumption</p>
	  </div>
	  <div class="bg2">
		<h2><i class="fas fa-dumbbell"></i></h2>
		<p>Workouts</p>
	  </div>
	  <div class="bg2">
		<h2>85 <span>%</span></h2>
		<p>Body Hydration</p>
	  </div>
	</div>

    </body>
</html>


Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/css/useful-css-snippets-css-grid-layout-image-span/
Copyright 2020. All Rights Reserved.