Image filters
In CSS, we can alter the appearance of an image using various effects and filters.
<style>
.blur { filter: blur(4px); }
.brightness { filter: brightness(250%); }
.contrast { filter: contrast(180%); }
.grayscale { filter: grayscale(100%); }
.huerotate { filter: hue-rotate(180deg); }
.invert { filter: invert(100%); }
.opacity { filter: opacity(50%); }
.saturate { filter: saturate(7); }
.sepia { filter: sepia(100%); }
.shadow { filter: drop-shadow(8px 8px 10px green); }
img {
width: 20%;
margin-right: 20px;
margin-bottom: 20px;
}
</style>
<img src="img.jpg" alt="Img">
<img class="blur" src="img.jpg" alt="Img">
<img class="brightness" src="img.jpg" alt="Img">
<img class="contrast" src="img.jpg" alt="Img">
<img class="grayscale" src="img.jpg" alt="Img">
<img class="huerotate" src="img.jpg" alt="Img">
<img class="invert" src="img.jpg" alt="Img">
<img class="opacity" src="img.jpg" alt="Img">
<img class="saturate" src="img.jpg" alt="Img">
<img class="sepia" src="img.jpg" alt="Img">
<img class="shadow" src="img.jpg" alt="Img">