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.

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>

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>

Rounded Images with CSS

Use border-radius CSS property for rounder image

img {
  border-radius: 8px;
}

Thumbnail Images with CSS

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

<img src="tesla.jpg" alt="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;
}

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

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>
Image Caption

Transparent Image

Use the opacity CSS property to make the your image transparent

img {
  opacity: 0.5;
}
opcity:0.1
opcity:0.5
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>
Text@Left

Image Filters

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

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

Image Hover Overlay

Image Flip

Image Modal

Responsive Image Gallery

Test