THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS Images


This chapter will show you how to use CSS to lay out images.


Rounded Images

Use the border-radius property to make adjusted images:


adventure cold

Example

Rounded Image:

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

Example

Circled Image:

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

Thumbnail Images

We use the border property to create the thumbnail.

Thumbnail Image:

adventure cold

Example

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
} <img src="paris.jpg" alt="Paris">
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="paris.jpg" alt="Paris">
</a>
Try it Yourself »

Responsive image

Responsive images automatically adapt to screens of all sizes.

In the example, you can check the effect by resetting the browser size:

If you need to zoom the picture freely, and the size of the picture is not larger than its original maximum value, you can use the following code:

Example

img {
    max-width: 100%;
    height: auto;
}
Try it Yourself »

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


Picture text

How to position picture text:

architecture

architecture, building

acrylic

acrylic craftsmanship 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

CSS filter attribute is used to add visual effects (such as blur and saturation) to an element.

Note: Internet Explorer or Safari 5.1 (and earlier) does not support this attribute.

Example

Change the color of all pictures to black and white (100% grayscale)::

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
Note: This property is not supported in Internet Explorer or Safari 5.1 (and earlier). Try it yourself »

Responsive Image Gallery

adult-refreshment clear
Add a portrayal of the picture here
attractive-delightful
Add a portrayal of the picture here
asphalt-condition mist
Add a portrayal of the picture here
agriculture-nation farmland
Add a portrayal of the picture 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 increasingly about Responsive Web Design in our CSS RWD Tutorial.


Image Modal (Advanced)

This example demonstrates how to combine CSS and JavaScript to render images together.

First, we use CSS to create a modal window (dialog), which is hidden by default.

Then we use JavaScript to display the modal window. When we click on the image, the image will be displayed in a pop-up window:

arts and makes books structure

Example

//Get modal window
var modal = document.getElementById('myModal');

//Get picture modal box, alt attribute as text description in picture popup
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";
}

First, we use CSS to create a modal window (dialog), which is hidden by default.

Then we use JavaScript to display the modal window. When we click on the image, the image will be displayed in a pop-up window´╝Ü

Try it yourself »