Item: CSS blend modes | stencil art
Rating: 3.4
Author: &#x2063;

0 Downloads
106 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS blend modes | stencil art</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<h1>CSS blend modes</h1>
<div class="holder marilyn">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilyn.jpg" alt="polaroid effect" height="200"/></figure>
</div>
<div class="holder elvis">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/elvis.jpg" alt="polaroid effect" height="200"/></figure>
</div>
<div class="holder hendrix">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/hendrix.jpg" alt="polaroid effect" height="200"/></figure>
</div>
<div class="holder cobain">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/cobain.jpg" alt="polaroid effect" height="200"/></figure>
</div>
<div class="holder joplin">
  <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/joplin.jpg" alt="polaroid effect" height="200"/></figure>
</div>
<h2>Originals </h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilyn.jpg" alt="no effect" height="200"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/elvis.jpg" alt="no effect" height="200"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/hendrix.jpg" alt="no effect" height="200"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/cobain.jpg" alt="no effect" height="200"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/joplin.jpg" alt="no effect" height="200"/>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/pixelass/css-blend-modes-or-stencil-art-mfDta */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
body {
  font-family: 'Open Sans', sans-serif;
  background: #555;
  color: #fff;
  min-width: 1300px;
}

.holder {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-size: 100%;
  position: relative;
}
.holder.marilyn, .holder.marilyn figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilyn.jpg);
}
.holder.elvis, .holder.elvis figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/elvis.jpg);
}
.holder.cobain, .holder.cobain figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/cobain.jpg);
}
.holder.hendrix, .holder.hendrix figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/hendrix.jpg);
}
.holder.joplin, .holder.joplin figure:after {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/joplin.jpg);
}

figure {
  padding: 0;
  margin: 0;
  display: inline-block;
  vertical-align: top;
  position: relative;
  -webkit-filter: saturate(0) brightness(0.9) contrast(3.7) saturate(0.6) contrast(1);
          filter: saturate(0) brightness(0.9) contrast(3.7) saturate(0.6) contrast(1);
}
figure img {
  height: 200px;
}
figure:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  -webkit-filter: saturate(0) contrast(10) brightness(3) contrast(1) grayscale(1) saturate(3);
          filter: saturate(0) contrast(10) brightness(3) contrast(1) grayscale(1) saturate(3);
  mix-blend-mode: overlay;
  background-size: 100%;
}

Comments

More from ⁣

CSS blend modes | stencil art

In this example below you will see how to do a CSS blend modes | stencil art with some HTML / CSS and Javascript

Comments

More from ⁣

pure CSS DNA

Live editing text on a canvas

3d eye | pure CSS

element queries concept

You Might Also Like

karaokend

Portfolio - FreeCodeCamp

Automatic helper classes with SASS maps

A Pen by Zachary Woodley

Replace every "o" with an "a"

GSAP Pixi Plugin

codepen第一網頁

feelin'-griddy2