- Rounded Images
- Thumbnail Images
- Responsive Images
- Center an Image
- Responsive Polaroid Images / Cards
- Transparent Image
- Image Text
- Image Filters
- Image Hover Overlay
- Fade in a Box
- Slide in Overlay from the Top
- Slide in Overlay from the Bottom
- Slide in Overlay from the Left
- Slide in Overlay from the Right
- Flip an Image
- Responsive Image Gallery
- Image Modal (Advanced)
Learn how to style images using CSS.
Rounded Images #
Use the border-radius property to create rounded images:
img {
border-radius: 50%;
}
img {
border-radius: 8px;
} 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:
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%;
} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
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)
img {
opacity: 0.5;
} Image Text #
How to position text in an image:
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.
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:
