A Pen by -a

Thumbnail
This awesome code was written by -a, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -a ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  -a</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- <div class="item">
  <b>Original</b>
  <div class="image-wrapper">
    <img src="http://noir-medical.com/images/example.jpg"/>
  </div>
</div> -->

<div class="item">
  <b>Filter #68 -- 52% Light Orange</b>
  <div class="image-wrapper">
    <img src="http://noir-medical.com/images/68_example.jpg"/>
  </div>
  <div class="image-wrapper filter-68">
    <img src="http://noir-medical.com/images/example.jpg"/>
  </div>
</div>

<div class="item">
  <b>Filter #26 -- 30% Blue</b>
  <div class="image-wrapper">
    <img src="http://noir-medical.com/images/26_example.jpg"/>
  </div>
  <div class="image-wrapper filter-26">
    <img src="http://noir-medical.com/images/example.jpg"/>
  </div>
</div>

<div class="item">
  <b>Filter #553 -- 52% Red/Orange</b>
  <div class="image-wrapper">
    <img src="http://noir-medical.com/images/553_example.jpg"/>
  </div>
  <div class="image-wrapper filter-553">
    <img src="http://noir-medical.com/images/example.jpg"/>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-a/a-pen-by-a-qajBqa */
.item {
  margin: 35px;
  float: left;
}

b {
  display: block;
}

.image-wrapper {
  position: relative;
  float: left;
  margin-right: 10px;
}
.image-wrapper:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
}

img {
  display: block;
}

.filter-68:before {
  background-color: rgba(248, 248, 67, 0.52);
}

.filter-26:before {
  background-color: rgba(12, 107, 227, 0.3);
}

.filter-553:before {
  background-color: rgba(252, 77, 10, 0.52);
}

Comments