Images help in enhancing website looks therefore CSS provided image styling at our convenience.Syntax:
<img src="source of the image" alt=" ">
Various CSS rules that can be applied to the image are:
Rounding the edges of the image.
Example :-
<style>
img {border-radius: 10px;}
</style>Output
By setting the height as auto you can make the image responsive.
Example :-
<style>
img {
max-width: 100%;
height:auto;
}
</style>Output
This property controls the transparency of the image visible on the website and ranges from 0 to 1.
Example :-
<style>
img {opacity: 0.5;}
</style>Output
Just like the filters on your phone camera, you can do the same with the images you use on your website.
Example :-
<style>
img {
max-width:600px;
max-height:600px;
filter: sepia();
}
</style>Output
Other commonly known filters present in CSS are blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), etc. As these are just functions therefore we can pass “%” as the parameters to control how much the filter affects the image.