CSS Styling Images - Explained with Examples

Transform your visuals with CSS! Learn image styling techniques through practical examples and step-by-step explanations in this insightful guide.

Learn how to style images using CSS.

Rounded Images

Use the border-radius property to create rounded images:

Example

Rounded Image:

img {
  border-radius: 8px;
}

Example

Circled Image:

img {
  border-radius: 50%;
}

Thumbnail Images

Use the border property to create thumbnail images.

Thumbnail Image:

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="paris.jpg" alt="Paris">

Thumbnail Image as Link:

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Example

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

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Polaroid Images / Cards

Cinque Terre

Northern Lights

Example

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

opacity 0.2

opacity 0.5

opacity 1
(default)

Example

img {
  opacity: 0.5;
}

Image Text

How to position text in an image:

Example

Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer or Edge 12.

Example

Change the color of all images to black and white (100% gray):

img {
  filter: grayscale(100%);
}

Image Hover Overlay

Create an overlay effect on hover:

Flip an Image

Move your mouse over the image:

Example

img:hover {
  transform: scaleX(-1);
}

Responsive Image Gallery

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Add a description of the image here

Add a description of the image here

Add a description of the image here

Add a description of the image here

Example

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px){
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

Image Modal (Advanced)

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:

Example

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}

#css