<!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%;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
