CSS Images

This section will introduce how to use CSS to layout images.

Rounded Images

Example

Rounded image:

img {    border-radius: 8px;}

Example

Oval image:

img {    border-radius: 50%;}

Thumbnails

We use the border property to create thumbnails.

Example

img {    border: 1px solid #ddd;    
    border-radius: 4px;    padding: 5px;}
<img src="paris.jpg" alt="Paris">

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>

Responsive Images

Responsive images will automatically adapt to various screen sizes.

In the example, you can resize the browser to see the effect:

If you need to freely scale the image, and the image does not exceed its original maximum size when enlarged, you can use the following code:

Example

img {    max-width: 100%;    height: auto;}

Tip: For more content on web responsive design, refer to the CSS Responsive Design Tutorial.

Image Text

How to position image text:

Example

Try it:

Card-style Images

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;}

Image Filters

The CSS filter property is used to add visual effects (e.g., blur and saturation) to elements.

Note: Internet Explorer

Example

Change all images to black and white (100% grayscale):

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

Tip: Visit the CSS Filter Reference for more content.

Responsive Image Gallery

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

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:

Example

// Get the modal window
var modal = document.getElementById('myModal');
// Get the image modal, alt attribute as the text description in the pop-up
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;
}

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";
}