CSS Styling Images
CSS offers several ways to style images, and this lesson walks through them.
Rounded Images
Rounded images come from the border-radius property.
Tip: Shaping (clipping) images into circles, ellipses and polygons is covered in the CSS Image Shapes chapter.
Rounded Image
Rounded corners on an image take only border-radius: 8px.
Prompt
Create a page that shows an image with rounded corners using border-radius: 8px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rounded Image</title>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Rounded Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
</body>
</html>
Circled Image
An image turns into a circle with border-radius: 50%.
Prompt
Create a page that shows an image styled as a circle using border-radius: 50%.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circled Image</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circled Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="300">
</body>
</html>
Thumbnail Images
Thumbnail images rely on the border property.
Thumbnail Image
A border, border-radius, and padding together turn this image into a thumbnail.
Prompt
Create a page showing an image styled as a thumbnail with a light border, border-radius, and padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Image</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
</style>
</head>
<body>
<h2>Thumbnail Image</h2>
<img src="img_5terre.jpg" alt="Cinque Terre">
</body>
</html>
Thumbnail as Link
Placing the thumbnail image inside an anchor tag turns it into a link, and box-shadow gives it a hover effect.
Prompt
Create a page showing a thumbnail image wrapped in a link. Add a hover effect with box-shadow on the image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail Image as Link</title>
<style>
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);
}
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<a href="https://prompt-cookbook.com" target="_blank">
<img src="img_5terre.jpg" alt="Cinque Terre">
</a>
</body>
</html>
Responsive Images
An image is responsive when it adjusts on its own to fit the size of the screen.
Setting max-width: 100% and height: auto lets an image shrink whenever it has to, while stopping it from growing beyond its original size.
Tip: Responsive Web Design has its own coverage in the CSS RWD Tutorial.
Example
Prompt
Create a page with a responsive image that scales down but never larger than its original size, using max-width: 100% and height: auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect.</p>
<img src="img_5terre.jpg" alt="Cinque Terre" width="1000" height="300">
</body>
</html>
Polaroid Images / Cards
A box-shadow effect plus a text caption below the image gives you a polaroid-style image card.
Example
Prompt
Create a page with two polaroid-style image cards. Each card has an image on top and a text caption below, with a box-shadow for the card effect.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polaroid Images / Cards</title>
<style>
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);
margin-bottom: 25px;
}
img {
width: 100%;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>Polaroid Images / Cards</h2>
<div class="polaroid">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="container">
<p>Cinque Terre</p>
</div>
</div>
<div class="polaroid">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="container">
<p>Northern Lights</p>
</div>
</div>
</body>
</html>
Responsive Image Gallery
Image galleries can be made responsive with CSS too: media queries re-arrange the images for different screen sizes.
Tip: Responsive Web Design has its own coverage in the CSS RWD Tutorial.
Example
Prompt
Create a responsive image gallery using CSS. Display four images in a row on large screens, two per row on medium screens (max-width: 768px), and one per row on small screens (max-width: 480px). Use media queries.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
div.gallery-item {
width: calc(25% - 20px);
margin: 10px;
}
div.gallery-item img {
width: 100%;
border-radius: 4px;
}
div.gallery-item .desc {
text-align: center;
padding: 8px;
}
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<img src="https://prompt-cookbook.com" alt="Green Forest">
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>