CSS Styling Images

CSS helps us to style the image elements using various styling properties. We can crop them, add hover effects add animations and transitions etc.

Here are some of the popular styling effects we can put on images using CSS

Image Borders

Changing the border properties of the image can help us crop or display it in certain shapes.

For example is you want to display a rounded-image, you can use the border-radius property to crop out a round part.

Similarly, you can display different image thumbnails using proper border values.

Image with border

    img{
         width:500px;
         height:auto;
         border :5px solid red;
         }

img{

width:500px;

height:auto;

border :5px solid red;

}

Run

Image Border with padding

  img{
       width:500px;
       height:auto;
       padding:5px;
       border :5px solid rgb(224,179,2);
    }

img{

width:500px;

height:auto;

padding:5px;

border :5px solid rgb(224,179,2);

}

Run

Image border radius

  img{
       width:500px;
       height:auto;
       padding:5px;
       border :5px solid rgb(224,179,2);
       border-radius:20px;
    }

img{

width:500px;

height:auto;

padding:5px;

border :5px solid rgb(224,179,2);

border-radius:20px;

}

Round Image

   img{
         width:200px;
         height:200px;
         padding:5px;
         border-radius:50%;
         }

img{

width:200px;

height:200px;

padding:5px;

border-radius:50%;

}

Run

Round Image border

   img{
         width:200px;
         height:200px;
         padding:2px;
         border-radius:50%;
         border: 2px solid #ddd; 
         }

img{

width:200px;

height:200px;

padding:2px;

border-radius:50%;

border: 2px solid #ddd;

}

Run

Responsive Images

Like any other element, images can also be made responsive to the change in the browser window/ screen.

We can use the max-width, width and height properties to achieve this effect. The image will then shrink or grow as per the screen size.

setting width to 100% will make image responsive.

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

img {

width: 100%;

height: auto;

}

Run

Image Centre

Setting the left and right margin to auto, also set the display block. Then the element can be centrally aligned.

img{
         display:block;
         width: 300px;
         margin-left:auto;
         margin-right:auto;
         }

img{

display:block;

width: 300px;

margin-left:auto;

margin-right:auto;

}

Run

Center Image inside a div

div{
   text-align: center;
   }
div img{
    width:50%;
}

div{

text-align: center;

}

div img{

width:50%;

}

Run

Image Opacity /Transparency

The transparency of the image can be altered to specify a certain state or for mere styling.

The value of the opacity property can be set from 0.0 to 1.0 for this purpose. Where 0.0 is fully transparent and 1.0 is complete opaque.

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

img {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

Run

Text

Text on the image can tell something about the image or even prompt the user to take any action on the image like double-click or hovering the pointer.

Text on the image

div{
         position:relative;
         color:#f1f1f1;
         font-size: 35px;
      }
         img {
          width: 100%;
          height: auto;
      }
         .top{
             position: absolute;
             top:2px;
             left: 20px;
          }
         .bottom{
             position:absolute;
             bottom:5px;
             right:5px;
         }

div{

position:relative;

color:#f1f1f1;

font-size: 35px;

}

img {

width: 100%;

height: auto;

}

.top{

position: absolute;

top:2px;

left: 20px;

}

.bottom{

position:absolute;

bottom:5px;

right:5px;

}

Run

Filters

Built in CSS filters to add visual effect to the images

Hover

We can make style changes for the mouse hover. You can set the .overlay for this purpose.

On hover set image opacity of 0.8 as below

 img:hover {
         opacity: 0.8;
         filter: alpha(opacity=80); /* For IE8 and earlier */
 }

img:hover {

opacity: 0.8;

filter: alpha(opacity=80); /* For IE8 and earlier */

}

Run

Flipping

Using the scaleX(-1) value we can flip the image

Image Gallery

Not only a single image, we can display a whole gallery of images on the web-page. We can also make the gallery responsive so that it re-arranges the images to fit the screen/window size.

Beautiful images from

Image Photo by Grahame Jenkins on Unsplash