15 AUG

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

Try it Yourself »

 Example

Circled Image:
img {
    border-radius: 50%;
}

Try it Yourself »

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”>

Try it Yourself »


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>

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:
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.
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%;
}

Try it Yourself »

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

Try it Yourself »

Transparent Image
The opacity property can take a value from 0.0 – 1.0. The lower value, the more transparent:
Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.
Example

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

Try it Yourself »

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

Try it Yourself »

Tip: Go to our CSS filter Reference to learn more about CSS filters.
Image Hover Overlay
Create an overlay effect on hover:
Example
Fade in text:

Try it Yourself »

Example
Fade in a box:

Try it Yourself »

Example
Slide in (top):

Try it Yourself »

Example
Slide in (bottom):

Try it Yourself »

Example
Slide in (left):

Try it Yourself »

Example
Slide in (right):

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

Try it Yourself »

Post Author: Zahid Farid

Related Posts '

27 AUG

CSS3 Flexbox

Flexible boxes, or flexbox, is a new layout mode in CSS3.Use of flexbox ensures that elements behave predictably when the page layout must...

Leave a Reply

Your email address will not be published. Required fields are marked *