View Categories

CSS Style Images

6 min read

Learn how to style images using CSS.

Rounded Images #

Use the border-radius property to create rounded images:

Paris
img { border-radius: 50%; }
Paris
img { border-radius: 8px; }

Thumbnail Images #

Use the border property to create thumbnail images.

Thumbnail Image:

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

Thumbnail Image as Link:

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:

Cinque Terre
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:

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Responsive Polaroid Images / Cards #

5 Terre

GER

Norther Lights

Nature

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:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(default)

img { opacity: 0.5; }

Image Text #

How to position text in an image:

Cingue Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

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

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

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

Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple Pineapple

Image Hover Overlay #

Create an overlay effect on hover:

Example
Fade in text: #

Avatar
Hello World

Fade in a Box #

Avatar
Camels

Slide in Overlay from the Top #

Avatar
Hello World

Slide in Overlay from the Bottom #

Avatar
Hello World

Slide in Overlay from the Left #

Avatar
Hello World

Slide in Overlay from the Right #

Avatar
Hello World

Flip an Image #

Move your mouse over the image:

Paris

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:

.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:

Northern Lights, Norway

Powered by BetterDocs

Leave a Reply