Skip to main content

CSS Styling Images

Rounded Images​

Use the border-radius property to create rounded images:

Rounded Image​

img {  
    border-radius:  8px;  
}

Circled Image​

img {  
    border-radius:  50%;  
}

Thumbnail Images​

Use the border property to create thumbnail images.

Thumbnail Image​

img {  
    border:  1px solid #ddd;  
    border-radius:  4px;  
    padding:  5px;  
    width:  150px;  
}
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);  
}

and the HTML code:

<a href="my-link">  
    <img src="image.jpg" alt="Alt text">  
</a>

Responsive Images​

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

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:

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:

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

Cards​

div.card{  
    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 to 1.0. The lower value, the more transparent:

img {  
    opacity:  0.5;  
}

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: images black and white

img {  
    filter:  grayscale(100%);  
}

Flip an Image on Mouse Hover​

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

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes.

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

Table of Contents