CSS Set Image Style

Learn how to use CSS to set image styles.

Rounded image

using border-radius attribute to create a circular image:

Example

Rounded image:

img {
  border-radius: 8px;
}

Try It Yourself

Example

Circular image:

img {
  border-radius: 50%;
}

Try It Yourself

thumbnail image

using border attribute to create a thumbnail.

Thumbnail:

Coffee

Example

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Try It Yourself

as a thumbnail for the 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>

Try It Yourself

Responsive images

Responsive images will automatically adjust to fit the screen size.

If you want to scale down the image as needed but prevent it from being scaled up larger than the original size, add the following code:

Example

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

Try It Yourself

Tip:In our CSS RWD Tutorial Learn more about responsive web design here.

Centered image

To center the image, set the left and right margins to auto and set it as a block element:

Coffee

Example

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

Try It Yourself

Polaroid photo / card

Tulip

Yellow Tulip

Tulip

Red Tulip

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;
}

Try It Yourself

Transparent Images

opacity The value range of the property is 0.0 - 1.0. The lower the value, the more transparent it is:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (default)

Example

img {
  opacity: 0.5;
}

Try It Yourself

Image Text

How to position text within an image:

Example

CodeW3C.com Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it yourself:

Top Left Top Right Bottom Left Bottom Right Center

Image Filters

CSS filter The property adds visual effects (such as blur and saturation) to elements.

Note:Internet Explorer or Edge 12 does not support the filter property.

Example

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

img {
  filter: grayscale(100%);
}

Try It Yourself

Tip:Please visit our CSS Filters Reference Manual, for more information about CSS filters.

Image Hover Overlay

Create an overlay effect when the mouse hovers over the image:

Example 1

Fade-in text:

Avatar
Hello World

Try It Yourself

Example 2

Fade-in box:

Avatar
Bill

Try It Yourself

Example 3

Slide in (up):

Avatar
Hello World

Try It Yourself

Example 4

Slide in (down):

Avatar
Hello World

Try It Yourself

Example 5

Slide in (left):

Avatar
Hello World

Try It Yourself

Example 6

Slide in (right):

Avatar
Hello World

Try It Yourself

Flip the image

Please move the mouse over the image:

Sports Park

Example

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

Try It Yourself

Responsive Image Gallery

We can use CSS to create a responsive image gallery.

This example uses media queries to rearrange images for different screen sizes. Please adjust the size of your browser window to see the effect:

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%;
  }
}

Try It Yourself

Tip:Please visit our CSS RWD Tutorial Learn more about responsive web design in the

Image Modal (Image Modal)

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

First, please use CSS to create a modal window (dialog) and default it to be hidden.

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

Green Turf

Try It Yourself