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: 8px;
}
Example
Circled
Image:
img {
border-radius: 50%;
}
Thumbnail Images
Use the border property to create thumbnail images.
Thumbnail Image:
Example
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="paris.jpg" alt="Paris">
Thumbnail Image as Link:
Example
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);
}
<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:
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
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:
Example
img {
opacity: 0.5;
}
Image Text
How to position text in an
image:
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%);
}
Image Hover Overlay
Create an overlay effect on
hover:
Example
Fade in
text:
Hello World
Example
Fade in a
box:
John
Example
Slide in
(top):
Hello World
Example
Slide in
(bottom):
Hello World
Example
Slide in
(left):
Hello World
Example
Slide in
(right):
Hello World
Flip an Image
Move your mouse over the
image:
Example
img:hover {
transform: scaleX(-1);
}
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:
Example
.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:
Example
// Get the modal
var modal =
document.getElementById('myModal');
// Get the image and insert it inside the modal - use its
"alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg =
document.getElementById("img01");
var captionText =
document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
