CSS Image Gallery

Images are important part of any web application which helps in making the application more versatile and attractive. Including a lot of images in a web application is generally not recommended, but it is important to use the images wherever they required.

The styling of an image in CSS is similar to the styling of an element by using the borders and margins. There are multiple CSS properties like border property, height property, width property, etc. that helps us to style an image.


Thumbnail Image

Thumbnails are maintained using border property and we can add as many images as we want.

Input:-

Index.html
	
<body> 
	  <img src="nature.jpg"/>
</body>

Style.css
img{
   border: 2px solid green;
   border-radius:5px;
   padding:10px;
}

Output:-


Transparent Image

To make an image transparent, we have to use the opacity property. The value of this property lies between 0.0 to 1.0, respectively.

Input:-

Index.html
	
<body> 
	  <img src="nature.jpg"/>
</body>

Style.css
img{
   border: 2px solid green;
   border-radius:5px;
   padding:10px;
	  opacity: 0.3;
}

Output:-


Rounded Image

For rounded images, border radius property is used and this property can be given from any of the side or from all sides.

  • border-radius: It sets all of the four border-radius property.
  • border-top-right-radius: It sets the border of the top-right corner.
  • border-top-left-radius: It sets the border of the top-left corner.
  • border-bottom-right-radius: It sets the border of the bottom-right corner.
  • border-bottom-left-radius: It sets the border of the bottom-left corner.
Input:-

Index.html
	
<body> 
	  <img src="nature.jpg"/>
</body>

Style.css
img{
   border: 2px solid green;
   padding:10px;
	  border-radius: 100%;
}

Output:-


Responsive Image

Responsive images automatically adjusts to fit on the screen size. It is used to adjust the image to the specified box automatically.

Input:-

Index.html
	
<body> 
	  <img src="nature.jpg"/>
</body>

Style.css
img{
   border: 2px solid green;
   padding: 10px;
	  max-width: 100%;  
	  height: auto;  
}

Output:-


Center an image

We can control centering of  an image by using the left-margin and right-margin property. We have to set these properties to auto in order to make a block element.

Input:-

Index.html
	
<body> 
	  <img src="nature.jpg"/>
</body>

Style.css
img{
   border: 2px solid green;
   padding: 10px;
	  margin-left: auto;
	  margin-right: auto;
	  display: block;
}

Output:-