root
/
css-mastery-16-master


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>The image filter function</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet" type="text/css">

  <style>

    .figure {
      color: #fff;
      background-image: url(img/saturn.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      background-color: #312b2b;
      width: 20em;
      min-height: 10em;
      margin: 2em;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: -webkit-box;
      display: -moz-box;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      float: left;
    }
    .figure-filtered {
      background-image: filter(url(img/saturn.png), grayscale(1) opacity(0.4));
    }
    h2 {
      font-family: Roboto Condensed, Roboto, Arial, sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.2em;
    }
  </style>
</head>
<body>
  <div class="figure">
    <h2>Saturn</h2>
  </div>

  <div class="figure figure-filtered">
    <h2>Saturn</h2>
  </div>
</body>
</html>