Eduaction Management 959 Lahore

Code With Jahangir

CSS Images

FREE COURSES

FREE CERTIFICATE

CSS Images

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:

 

Image Border Radius 

Rounding the edges of the image.

Eg:

img {border-radius: 10px;}

 

Output:

 

Image Responsiveness 

By setting the height as auto you can make the image responsive.

 

Eg:

img {
            max-width: 100%;
            height: auto;
        }

 

Output:

 

Apart from this, you can also use commands like fit-command, max-content, etc to let the image fit according to its value.

 

Image Opacity 

This property controls the transparency of the image visible on the website and ranges from 0 to 1.

 

Eg: 

opacity: 0.5;

 

Output:

 

Image Filter

Just like the filters on your phone camera, you can do the same with the images you use on your website.

 

Eg:

img {
            max-width: 600px;
            max-height: 600px;
            filter: sepia();
        }

 

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.

 Eduaction Management 959 Lahore

Code With Jahangir

CSS Images

FREE COURSES

FREE CERTIFICATE