<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Roy Lichtenstein effect in CSS</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Roy Lichtenstein effect in CSS</h1>
<div class="holder #{$person}">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on #{$person}" height="333"/></figure>
</div>
<div class="holder #{$person}">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on #{$person}" height="333"/></figure>
</div>
<div class="holder #{$person}">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on #{$person}" height="333"/></figure>
</div>
<h2>Originals</h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on {$person}" height="333"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on {$person}" height="333"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/#{$person}.jpg" alt="roy lichtenstein effect on {$person}" height="333"/>
</body>
</html>
/*Downloaded from https://www.codeseek.co/pixelass/roy-lichtenstein-effect-in-css-Bsfwt */
@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: 333px;
width: 277px;
-webkit-filter: contrast(1.5) saturate(0.4) contrast(3);
filter: contrast(1.5) saturate(0.4) contrast(3);
overflow: hidden;
background-size: 100%;
position: relative;
}
.holder.marilynmonroe, .holder.marilynmonroe figure:after {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilynmonroe.jpg);
}
.holder.diva1, .holder.diva1 figure:after {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/diva1.jpg);
}
.holder.marilynmonroe2, .holder.marilynmonroe2 figure:after {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/28359/marilynmonroe2.jpg);
}
figure {
padding: 0;
margin: 0;
display: inline-block;
vertical-align: top;
position: relative;
mix-blend-mode: screen;
-webkit-transform: scale(0.333);
transform: scale(0.333);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-filter: brightness(3) contrast(0.15) saturate(0.5) contrast(5);
filter: brightness(3) contrast(0.15) saturate(0.5) contrast(5);
}
figure img {
height: 1000px;
}
figure:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
mix-blend-mode: multiply;
background-color: white;
background-image: radial-gradient(black 33.3333333333%, transparent 33.3333333333%), radial-gradient(black 33.3333333333%, transparent 33.3333333333%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
figure:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
-webkit-filter: contrast(10) blur(1px) brightness(3) contrast(1) grayscale(1) saturate(10);
filter: contrast(10) blur(1px) brightness(3) contrast(1) grayscale(1) saturate(10);
mix-blend-mode: multiply;
background-size: 100%;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
