CSS Tutorial 10: Image Manipulation & Filters

Lesson 10 Review

In our last lesson, we learned how to use CSS Variables and apply Box Shadows to elements. Today, we focus entirely on manipulating image data. You will learn how to crop images perfectly without distorting them, and how to apply real-time color filters using pure CSS.

Step 1: The Object-Fit Property (No More Squished Images)

One of the most common mistakes junior developers make is forcing an image into a specific box size, which causes the image to stretch and squish horribly. The object-fit property solves this by telling the image how to behave inside its container.

• fill: (Default). The image stretches and squishes to fill the exact dimensions of the box.
• contain: The image shrinks so that the entire picture is visible, leaving empty space if the box dimensions don't match the image's aspect ratio.
• cover: The image zooms in to fill the entire box perfectly, and mathematically crops off any excess edges. This is the professional standard for profile pictures and thumbnails.

The HTML & CSS:

<!-- HTML -->
<img class="squished" src="portrait.jpg">
<img class="perfect" src="portrait.jpg">

/* CSS */
/* We force both images to be 150px wide by 150px tall (a perfect square) */
img {
  width: 150px;
  height: 150px;
  border: 2px solid #333;
}

.squished {
  object-fit: fill; /* Distorts the image */
}

.perfect {
  object-fit: cover; /* Zooms and crops automatically! */
}

The Output:

object-fit: fill

object-fit: cover

Step 2: Background Images & Positioning

Instead of using an <img> tag, you can apply an image directly to the background of a <div>. This is incredibly useful for "Hero Sections" (large banners at the top of a website) because it allows you to type HTML text directly over the top of the image.

• background-image: url('file.jpg');: Loads the image.
• background-size: cover;: Operates exactly like object-fit, ensuring the background fills the entire div.
• background-position: center;: Ensures that if the image is cropped, the exact center of the photo remains visible.
• background-attachment: fixed;: Creates a "Parallax" effect. The image stays glued to the screen while the rest of the website scrolls over it!

The HTML & CSS: A Hero Banner

.hero-banner {
  height: 200px;
  background-image: url('space.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

The Output:

HTML Text Over Background

Step 3: CSS Filters (In-Browser Image Processing)

The filter property applies graphical effects like blurring or color shifting to an element. You can chain multiple filters together by separating them with a space.

• blur(5px): Applies a Gaussian blur. Higher pixel values mean more blur.
• grayscale(100%): Converts the image entirely to black and white.
• brightness(150%): Makes the image brighter (100% is normal, 50% is dark).
• contrast(200%): Increases the difference between light and dark areas.
• sepia(100%): Applies a vintage, brownish tone.

The CSS: Filter Effects

.blur-effect { filter: blur(4px); }
.gray-effect { filter: grayscale(100%); }
/* Chaining filters together */
.vintage-effect { filter: sepia(100%) contrast(150%); }

The Output:

Normal

blur(4px)

grayscale

Vintage

Step 4: Box-Shadow vs. Drop-Shadow

In Lesson 10, we learned about box-shadow. However, box-shadow draws a rectangular shadow around the physical bounding box of the element. If you use a transparent PNG (like a logo without a background), box-shadow will draw a shadow around the invisible square boundaries of the image.

To fix this, CSS provides filter: drop-shadow(). This incredible function reads the Alpha Channel (transparency) of your image and draws a shadow that perfectly traces the exact shape of your graphic!

The CSS: Comparing Shadows

.box-shadow-fail {
  /* Draws a square shadow around the invisible boundaries */
  box-shadow: 10px 10px 5px rgba(0,0,0,0.5);
}

.drop-shadow-success {
  /* Uses filter to trace the actual shape of the triangle */
  filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
}

The Output (Notice how Drop-Shadow traces the triangle perfectly):

box-shadow

filter: drop-shadow

Final Quiz: Test Your Visual Logic

Click the buttons below to verify your knowledge.

1. You have a square container, but you are trying to display a tall, rectangular photograph inside it. You want the photo to fill the square entirely without stretching or distorting. Which property should you use?

A) object-fit: fill;

Incorrect. `fill` is the default behavior that causes the stretching and squishing you want to avoid.

B) object-fit: cover;

Correct! `cover` zooms the image to fill the container and intelligently crops off the excess data, maintaining the perfect aspect ratio.

C) object-fit: contain;

Incorrect. `contain` maintains the aspect ratio, but it will shrink the image to ensure the whole thing fits, leaving empty white space inside your square.

2. If you want to make an image completely black and white, what is the correct CSS syntax?

A) filter: grayscale(100%);

Correct! The `filter` property invokes the `grayscale` function to strip the color data out of the image natively in the browser.

B) background-color: black-and-white;

Incorrect. Background-color only affects the background of a container, it does not process image data.

C) image-color: none;

Incorrect. `image-color` is not a valid CSS property.

3. Why is `filter: drop-shadow()` vastly superior to `box-shadow` when styling a transparent PNG logo?

A) Because drop-shadow renders faster on mobile devices.

Incorrect. Performance is not the main differentiator here.

B) Because drop-shadow traces the actual visible shape of the graphic, whereas box-shadow blindly draws a square around the invisible bounding box.

Correct! `drop-shadow` respects the alpha transparency channel of your image, resulting in a physically accurate shadow that matches the exact contour of your logo.

C) Because drop-shadow allows you to change the color of the shadow.

Incorrect. Both properties allow you to change the color of the shadow.