<div class="container -column">
<div class="holder min">
normal:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg">
</div>
<div class="holder min">
blur:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-blur min">
</div>
<div class="holder min">
brightness:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-brightness">
</div>
<div class="holder min">
contrast:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-contrast">
</div>
<div class="holder min">
hue-rotate:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-hue-rotate">
</div>
<div class="holder min">
invert:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-invert">
</div>
<div class="holder min">
saturate:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-saturate">
</div>
<div class="holder min">
sepia:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-sepia">
</div>
<div class="holder min">
multiple filters:
<img src="https://s3.envato.com/files/193652246/Seattle.jpg" class="-multiple">
</div>
</div>
.-blur {
filter: blur(8px);
}
.-brightness {
filter: brightness(1.5);
}
.-contrast {
filter: contrast(250%);
}
.-hue-rotate {
filter: hue-rotate(60deg);
}
.-invert {
filter: invert(85%);
}
.-opacity {
filter: opacity(50%);
}
.-saturate {
filter: saturate(50%);
}
.-sepia {
filter: sepia(80%);
}
.-multiple {
filter: hue-rotate(70deg) saturate(145%) brightness(145%);
}
.holder {
font-size: 40px;
line-height: 1.5em;
margin-bottom: 1em;
width: 300px;
img {
width: 100%;
}
}
html, body {
height: auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.