CSS Image & Media

Last Updated: April 9, 2022

Images are videos that behave a little differently than the regular box to which you can apply CSS

Images and videos are called replaced elements. CSS can not affect the internal layout of these elements.

What does it mean?

When the image is smaller than the box it does not stretch to fit the box.

Safeimagekit resized imgpng

Larger than the box and overflow

<style>
 .image_box{
   width:150px;
   height:150px;
   border:1px solid #ccc;
   padding:10px 10px;
 }
 .image2{
   width: 175px;
   height:175px;
   padding:10px 10px;
}
</style>
<div class="image_box">
<img class="image3" src="img/arrow.png">
</div>
Safeimagekit resized imgpng

To fix the overflow apps the max-width to 100%

<style>
 .image_box{
  width:150px;
  height:150px;
  border:1px solid #ccc;
  padding:10px 10px;
}
 .image3{
  max-width: 100%;
  height:auto;
  padding:10px 10px;
}
</style>
<div class="image_box">
<img class="image3" src="img/arrow.png">
</div>
Safeimagekit resized imgpng

Rounded Images with CSS

Use border-radius CSS property for rounder image

img {
  border-radius: 8px;
}
tesla

Thumbnail Images with CSS

img {
  max-width: 100%;
  height:auto;
  padding: 5px;
  border:2px solid #ccc;
}

<img src="tesla.jpg" alt="Tesla">
tesla

Responsive Images with CSS

If an image is wider than the screen, the image will overflow, causing a horizontal scrollbar to appear. To avoid max-inline-size

img {
  max-inline-size: 100%;
  block-size: auto;
}

// or you can use
img {
  max-width: 100%;
  height: auto;
}
tesla

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

.image7{
  max-width:200px;
  height:auto;
  padding: 5px;
  margin-left:auto;
  margin-right:auto;
  display:block;
}
tesla

Polaroid Images / Card

<style>
        .card_container {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

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

        .card_container div:nth-of-type(2) {
            background-color: #ffffff;
            text-align: center;
            padding: 5px 5px;
            font-size: 1rem;
        }

    </style>
<div class="card_container">
    <div><img src="images/tesla.png"></div>
    <div>Image Caption</div>
</div>
tesla
Image Caption

Transparent Image

Use the opacity CSS property to make the your image transparent

img {
  opacity: 0.5;
}
tesla
opcity:0.1
tesla
opcity:0.5
tesla
opcity:1

Image Text

Positioning text in a image. position CSS property of the container should be relative and text element position should be absolute

.text_container {
    width: 300px;
    position: relative;
}

.top_left {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 15px;
}

<div class="text_container">
    <div>
        <img src="images/tesla.png">
        <div class="top_left"><code>Text@Left</code></div>
    </div>
</div>
tesla
Text@Left

Image Filters

filter property can be used to apply blur and saturation to element

.blur {
  -webkit-filter: blur(5px);
          filter: blur(5px);
}
tesla

Image Hover Overlay

Image Flip

Image Modal

Responsive Image Gallery

Test