A Pen by Gary Hyde

Thumbnail
This awesome code was written by ghyde03, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ghyde03 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Gary Hyde</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="bg">
  
 <div class="divider d-1">
   overlay
  </div>
   <div class="divider d-2">
     multiply
  </div>
   <div class="divider d-3">
     screen
  </div>
   <div class="divider d-4">
     darken
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ghyde03/a-pen-by-gary-hyde-ggOXoK */
html, body {
  width: 100%;
  height: 100%;
}

.bg {
  width: 100%;
  height: 100%;
  background-image: url(https://images.unsplash.com/photo-1478591604075-f1062dfdf507);
  background-size: cover;
}
.bg .divider {
  width: 10%;
  font-size: 24px;
  padding-top: 20px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: 15px;
  bottom: 0;
}
.bg .divider.d-1 {
  left: 10%;
  background-color: #F27F00;
  mix-blend-mode: overlay;
}
.bg .divider.d-2 {
  left: 20%;
  background-color: #F27F00;
  mix-blend-mode: multiply;
}
.bg .divider.d-3 {
  left: 30%;
  background-color: #F27F00;
  mix-blend-mode: screen;
}
.bg .divider.d-4 {
  left: 40%;
  background-color: #F27F00;
  mix-blend-mode: darken;
}

Comments