CSS Styling Images

Learn how to style images using CSS.

Rounded Images

Use the border-radius property to create rounded images:

Example

Rounded Image:

img {
border-radius: 20px;
}

Example

Circled Image:

img {
border-radius: 50%;
}

Thumbnail Images

Use the border property to create thumbnail images.

Thumbnail Image:

Example

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

<img src="road.jpg" alt="Road to Life"/>

Thumbnail Image as Link:

Example

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

img:hover {
box-shadow: 0 0 15px 1px rgba(0,0,0,0.3);
}

<a href="road.jpg">
<img src="road.jpg" alt="Road to Life"/>
</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

Forest

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

Bottom Left

Top Left

Top Right

Bottom Right

Centered

           

Flip an Image

Move your mouse over the image:

Example

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