THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Images


Learn how to style images using CSS.


Rounded Images

Use the border-radius property to create rounded images:


adventure cold

Example

Rounded Image:

img {
    border-radius: 8px;
}
adventure cold

Example

Circled Image:

img {
    border-radius: 50%;
}
Try it Yourself »

Thumbnail Images

Use the border property to create thumbnail images.

Thumbnail Image:

adventure cold

Example

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="adventure cold.jpg" alt="adventure cold">
Try it Yourself »

Thumbnail Image as Link:

Example

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="adventure cold.jpg" alt="adventure cold">
</a>
Try it Yourself »

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

arts-and-crafts-books-design

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;
}
Try it Yourself »

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.


Polaroid Images / Cards

architecture

architecture, building

acrylic

acrylic art arts

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;
}
Try it Yourself »

Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: This property is not supported in Internet Explorer or Safari 5.1 (and earlier).

Example

Change the color of all images to black and white (100% gray):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
Try it yourself »

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:

adult-beverage-blank
Add a description of the image here
attractive-beautiful
Add a description of the image here
asphalt-environment-fog
Add a description of the image here
agriculture-country-countryside
Add a description of the image here

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%;
    }
}
Try it yourself »

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.


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:

arts and crafts books design

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;
    modalImg.alt = this.alt;
    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";
}
Try it yourself »