Styling Images in CSS

Hello guys. Welcome to our CSS series. In our last segment we had seen about the CSS button property, which means we had given HTML buttons and in that all the properties of CSS that can be applicable. Our today's session is on the images, how we can play with the images and how we can put different properties and CSS effects on the images. We can make it responsive and make thumbnails, all these we will see in our today's section. First of all, for example, we will see what CSS images. So, as you know, when we define a web application or a web page, an image plays a very important role. Whatever content we write compared to that when we show an image that represents our idea more effectively because sometimes with logos and images, we can pass on more information without typing. So, whenever we work with a web application, the widely used content is our image. Like it is also written in this para, here it is mentioned, CSS helps us to control the display of images in web applications. Whichever image we show. To control that image, we make use of CSS. It is written further that the styling of an image in CSS is similar to the styling of an element by using borders and margin. Means like we control any element with borders and margins. In the same way, we can control or style the image also with borders and margins. There are multiple CSS properties such as border property, height, property, width etc. that helps us to style an image. Means like here, border, height and width properties that have been given, with their help we can style the images. So, guys in today's session, we will see how we can style the images with different properties. The first comes the thumbnail image which means how we can present an image in the way of a thumbnail. So, the example that has been given here we will use it as an image for the thumbnail. But first of all, we will open one Sublime Text and in Sublime text, HTML, example, image save. Okay, now we will run this program. This is the program that is running. First of all, it is shown in the slide. We have to first make a thumbnail image. So, let's say I have one image available with me. Image, its name, cartoon we have taken. A cartoon image we will place here, .jpg, images, slash, save, reload. So, we are seeing a very big image here. So, 1st of all we'll set the width and height 1st. So, lets say, here in style, in image, we will first pass the width, 200 pixels, height we will pass as 200 pixels. Okay. This is the image that has come here with 200, 200 pixels width. Let’s say that our 1st property is that we have to convert it into a thumbnail. So, how can we convert it into a thumbnail? By using broader properties, we can convert any image into a thumbnail. Like it is written here border 2-pixel solid red. So, we will use the same property to make the image as a thumbnail. So, here we will give, the 1st one is border, 2-pixel, solid, red colour. We can even take some other colour. After that for more styling we have added border radius here. Border radius, let's say I take 10 pixels, here it is given 5 pixels. There is padding given here, 5 pixels, save. So, this image that we are getting with a border. This is our thumbnail image. Let's say if I open my computer here, you can see that this is almost a thumbnail view. Even here you will see some of the thumbnails, while selecting tiles what we are getting, we call these thumbnails. To get a thumbnail like view what we do is, we add the border. When we have to convert an image into a thumbnail in a web page. Then we usually add a border to it. To make the border properly visible we have given padding and border radius for styling purposes. So, this was a thumbnail image. How we convert a normal image into a thumbnail image. Then comes the transparent image, how can we make the image transparent? The same opacity property we are going to add in this image. Our first image is of the thumbnail, we will make it 100 px. Okay, so it has become 100 px. Now, I'll add a class to the image, class, image, thumbnail, and through this class I will access this. Okay. So, now we have removed the image tag and made an image thumbnail. We have changed the selector. So, we are getting it as it is here. Next we will use the same image but this time instead of using image thumbnail, we will use image transparent as we have to make our image transparent. Image transparent. We will take the same width and height property. Because we have to give the same height and width to all our images. Here inside the image we can place these properties so that our coding lines decrease. So, you can see that I'm getting the image of the same size over here. Along with that I will also give margin to this image so that my image is different from every other image. So, let's say I give a 10 px margin so that we can keep a distance between two images. Okay, now the other image of ours which is transparent we have to add the opacity, so same border radius and padding we have added and along with that we have added opacity. This is our example, to make the image transparent. Here it will become opacity. Opacity like we know 1, means totally non transparent and 0, means totally transparent. If I take 1.0, my image will be as it is. If I give 0.8 I'll get a light transparency. If I make it 0.5, we will get a little more transparent and when I make it 0, it will be a fully transparent image. That is the reason we keep it 0.5, so that we get a semi-transparent image. So, this is our thumbnail and second is our transparent image. So, this was about how we provide transparency to our image by using opacity property. Then comes the rounded image. How can we make an image round? So, let's say to make an image round we have to use border radius property. Let's say I use the same image again, this time I will make use of an image, rounded class. In this we are going to make use of only the border radius to make the image round. We will try it with both pixel and percentage. Here we have two pass values. Let's say I take a border radius, 10 pixels and this is my image. So, we have this much curve available. If I increase it a little more, let's say if I make it 50, we are getting this type of circular image here. So, the first option is we are making the image round using pixel values. And the second is we are making the image circular by using percentage values. Before that, I will comment on this border radius and I add 50%, I save and reload. We are getting the same image. Let's say image rounded, value and image rounded percentage, if we are generating 2 classes. So, image round value in which we will keep this applicable. This is our image round percentage in which we will pass our percentage value. I will remove it from here and keep it here. So, 2 classes of value and percentage. In both cases we are getting a proper circular image, instead of 50 px. If I make it 40 px, we will get a round image to some extent. As per our requirement we can give the border radius and circle the corner of the image and keep on making it round and go till the circle. This was our image around, how we give our image a round shape. Then comes the responsive image. Responsive image is very important because our screen size, which is there, screens are available in different sizes. Currently I'm making this video through a desktop. So, currently my desktop screen size will be used. If the same thing I check through my mobile my mobile has its own small screen size. If I use a laptop there is a different screen size available there. So, if we open the same thing in different devices like desktop and laptop or mobile phones, if we have given the image a fixed width, the image that is visible on the desktop, it will not look the same way in our mobile. So, that responsive image is very important. Responsive image means image resizes itself as per the screen size. Means if the screen is small the image will look small. If the screen is big, the image will look big. So, this automatic adjustment of the image we call this responsive behaviour. How can we do this using these two properties? So, let's say I use an image here. Image, ours is a responsive class (Pause) and in that we will add two properties, max width 10 0% and height we will take it as auto, we will save it and reload it so this is my image as it looks originally. If I resize my screen, if I'm holding the corner of the browser and resizing, this image will be set as per my browser. So, you can see that the size of my image is not changing here. It is fit as it is. What we will do for its solution, for this the property that we have added we have given it to the class to this class, we will add as important, which we had seen in our important segment, save, reload. This is not getting applicable. That means that we have to add more attributes in CSS. You can see that it is not even possible with the id. So, we'll do one thing, we will make a new program, in which we will not add margins in CSS. So, let's say, I generate from here a new HTML example, responsive image, save, responsive image.html. This in the body, this in the style, save, I will now run it. So, this is my image, which you can see over here. Now I'm making my browser small. In every case my height remains as it is. It is not getting reduced, let's say if I reduce it more from here. So, my browser is not getting smaller than this because there are buttons and tabs over it, so according to my browser, my height is becoming auto means you can see that this is the fixed height of my image and when I, let's say okay, now we will resize this, then when I'm resizing it my image has become a little smaller, then I'm making it bigger. Now the image is getting bigger and smaller as per my browser which indicates that my image is getting responsive now. So, first, we have given a fixed height in the place of auto. That's the reason it was not working. Now, I have removed the fixed height property. Now my image is working properly. So, this is how we make our image responsive. So, this is how the image as per the browser width can make itself big or small, which means it makes responsive behaviour. So, this was our image responsive, then comes centre an image means how we centre align an image. To centre align we have two properties left and right. If we give auto to both our images, get centre aligned, like we had seen in the last margin section, when we have to centre align any element, in that case we use margin 0 auto property. Same way to make this image centre here. We will use margin left and margin right for example if I add the same image here and I take here image centre, copy, what we have written here, margin left, we will take it as auto, margin right, auto and we will give display block, save. Now when we run it you can see that our image has been centre aligned. That means we have brought the image in the centre, same thing we can do with margin again 0 auto, for example. Margin 0 space auto, save, load. So, you can use 0 auto or left and right auto also and can make the image centre aligned. So, we have seen today, how to make the image responsive and how to centre align it, how to make the image round, transparent and convert it into thumbnails. All these CSS properties we have applied on the image. So, I request you guys all the properties that we have applied on the image today, you perform those practical on your own. While performing the practical or during the segment If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to rectify your issues at the earliest and revert to you. Next segment is on CSS filters. Thank you.