<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The filter properties</title>
<style> img {width:100px;height:auto;} </style>
</head>
<body>
<div>
<img src="images/hibiscus.jpg" alt="hibiscus (original, no filter)">
<img src="images/hibiscus.jpg" alt="hibiscus blur filter" style="filter:blur(2px);">
<img src="images/hibiscus.jpg" alt="hibiscus sepia filter" style="filter:sepia(100%);">
<img src="images/hibiscus.jpg" alt="hibiscus grayscale filter" style="filter:grayscale(100%);">
<img src="images/hibiscus.jpg" alt="hibiscus low saturate filter" style="filter:saturate(30%);">
<img src="images/hibiscus.jpg" alt="hibiscus high saturate filter" style="filter:saturate(300%);">
<img src="images/hibiscus.jpg" alt="hibiscus invert filter" style="filter:invert(100%);">
<img src="images/hibiscus.jpg" alt="hibiscus low brightness filter" style="filter:brightness(50%);">
<img src="images/hibiscus.jpg" alt="hibiscus low contrast filter" style="filter:contrast(20%);">
<img src="images/hibiscus.jpg" alt="hibiscus hur-rotate filter" style="filter:hue-rotate(90deg);">
<img src="images/hibiscus.jpg" alt="hibiscus three filters applied" style="filter:contrast(200%) brightness(200%) saturate(200%);">
</div>
</body>
</html>
