CSS3 Images

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

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.

Example

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

}

<img src="paris.jpg"alt="Paris">

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.

Example

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

}

 

Center an Image

To center an image within the page, use margin: auto; and make it into a block element:

Example

img {
    display: block;
    margin: auto;
    width: 50%;

}

 

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;
    filter: alpha(opacity=50); /* For IE8 and earlier */

}

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, Edge 12, or Safari 5.1 and earlier.

Example

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

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);

}

Image Hover Overlay

Create an overlay effect on hover:

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.

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