CSS Images

CSS Images

Images make your content looks awesome. Style them properly with CSS, and make them more amazing. Now, let’s work upon how to style CSS Images easily on our website.

Tip: Use optimized images for your website. Higher the size of images leads to slow loading of your website.

CSS Image Border Property

Style CSS Images properly and add border to the image with the CSS border property. We will be adding 4px blue color border to our image as shown below,

Here’s the output,

Above we learned how to add border to image.

Also Read:
Learn how to add Background Image on a web page

Now, we will learn how to style images with border-radius property.

CSS border-radius Property (Image Border Radius)

With CSS, you can also workaround images and style it with the border-radius property. Through this, you can create awesome looking rounded images and rounded corners as shown below,

Here’s the output,

Above, you can see now we have rounded corners.

CSS Responsive Image

Nowadays, we need to create websites which are responsive. Responsive website is a website which is created for multiple devices i.e. desktop, mobile, and tablet. In the same way, we need responsive images, so that it adjusts to fit the size of the screen.

Above, you can see we have set max-width:100% and height:auto to make it responsive, Now it will work for multiple devices. Check it by resizing your web browser. We have shown the same below,

Now, we will see our image after resizing the browser to check its responsiveness,

CSS Image Opacity Property

Here, we will set the image opacity with CSS. Use the property opacity to make the image transparent.

Set the value from 0.0 – 1.0 for opacity. We’ll set 0.3 and let’s see what happens. The image will now be 30% transparent.

Here’s the output,

In this lesson, we learned how to work with CSS Images to add border, set border radius, create responsive image and add image opacity.

CSS Links
CSS Borders
Studyopedia Editorial Staff
Studyopedia Editorial Staff

We work to create free tutorials for all.

No Comments

Post A Comment