<div>
<h1>Original Image:</h1>
<img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
<h1>Filtered Images: </h1>
<div class="filter1">
<img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
<div class="filter2">
<img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
<div class="filter3">
<img src="https://images.unsplash.com/photo-1546948630-1149ea60dc86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80">
</div>
img {
width: 500px;
margin-bottom: 20px;
}
.filter1 img {
filter: grayscale(90%) sepia(13%) saturate(700%);
}
.filter2 img {
filter: hue-rotate(-40deg);
}
.filter3 img {
filter: contrast(170%) saturate(80%) blur(1px);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.