Image Styling

The Artistic Touch of the Image Masters

Images are the unsung heroes of your website. They speak volumes when words fall short. Sure, you could toss them onto the page, like a traveler carelessly scattering souvenirs on a table. But with CSS, the real magic begins! Give your images not just a place but a stage!

With a graceful border or a dramatic shadow, you can make your images appear as if they’re floating. You can scale them flexibly, letting them adapt to any screen like a chameleon blending seamlessly into its surroundings. Filters allow you to add a touch of sepia, or let colors fade like memories of distant adventures. Your images won’t just be seen—they’ll be admired.

Let’s Keep Going

Scalable Images
Styling Images
Perfect Fit

Image Filters
Overview of Image Filters

Images in CSS

Scale, style, adapt – make more out of your images!

Scalable Images

Flexibility for Your Visual Treasures

With the magical spell width: 100%, your image adapts to its container as if custom-tailored for every screen size. No awkward scrolling, no odd squeezing—the image stays flawlessly proportioned and scales as if it were born to do so. It blends harmoniously, like an enchantment that always maintains perfect balance.

.img-fluid {
		width: 100%;
		height: auto;
}

width: 100%;: The image adjusts to the full width of its container.
height: auto;: This property ensures the image retains its proportions while scaling in width.

Styling Images

Frames, Curves, and More

Want to give your image that magical touch? With CSS, an ordinary picture transforms into a masterpiece! Rounded corners, elegant borders, and subtle shadows can turn a simple photo into a true highlight. A pinch of CSS here, a dash of shadow there, and your image floats as if enchanted on the page. Everything harmonious, everything magical.

.styled-image {
    border-radius: 50%;
    border: 1px solid black;
}

In this example, the image is styled with a border and a border-radius of 50% for a perfectly round shape. You can adjust the radius as you like. To create depth, add a shadow with box-shadow.

Perfect Fit

When Images Command the Space

With object-fit, you control how an image nestles into its container. Want it cropped, stretched, or gracefully fitted? You hold the reins, transforming your image into the perfect companion for your design. Even when the aspect ratio doesn’t quite align, this magical property ensures harmony, like a puzzle piece falling perfectly into place.

.obj-fit {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

object-fit: cover;: The image is scaled and cropped to fill the container entirely, while preserving its aspect ratio

Image Filters

Magic Without Photoshop

Why make it complicated when it can be simple? With CSS image filters, you can cast effects like grayscale, blur, or sepia over your images as if wielding a magic wand. No extra software, no sorcery—just apply the filter and transform the image directly in your CSS code.

.img-style {
    filter: grayscale(50%) blur(5px) brightness(1.2);
}

In this example, a 50% grayscale conversion, a subtle 5px blur, and a 20% brightness boost are applied.

Overview of Image Filters

blur()
Adds a soft focus effect, making an image appear blurred.
Example: filter: blur(5px);
brightness()
Adjusts the brightness of the element. A value of 1 equals the normal brightness.
Example: filter: brightness(1.5);
contrast()
Modifies the element’s contrast. Values above 1 increase contrast; values below 1 reduce it.
Example: filter: contrast(0.8);
grayscale()
Converts the image to grayscale. A value of 1 applies full grayscale.
Example: filter: grayscale(1);
hue-rotate()
Rotates the image’s hues along the color wheel. The value is measured in degrees (deg).
Example: filter: hue-rotate(90deg);

invert()
Reverses the colors of the image. A value of 1 fully inverts the colors, while 0 leaves them unchanged.
Example: filter: invert(1);
opacity()
Controls the transparency of the element. A value of 1 means full opacity; 0 makes it invisible.
Example: filter: opacity(0.5);
saturate()
Boosts or reduces color saturation. Values above 1 enhance saturation, while values below 1 reduce it.
Example: filter: saturate(2);
sepia()
Applies a sepia tone to the image. A value of 1 fully applies sepia, while 0 leaves it unchanged.
Example: filter: sepia(0.7);
drop-shadow()
Adds a shadow effect to the image.
Example: filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));

In this lesson, you have learned…

How to scale images responsively using width: 100% and height: auto to adapt to different screen sizes.
Why border-radius, border, and box-shadow stylishly round off or highlight images to make them more visually appealing.
How object-fit allows you to fit images perfectly into containers, whether stretched, cropped, or proportionally resized.
Which CSS filters you can use to edit images directly in the code – from grayscale to blur to color adjustments.
Why drop-shadow is a great way to add depth to images and visually separate them from the background.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Transformation of Images

Rumor has it that the forest’s tablets have a flair for the dramatic – scaling and reshaping themselves depending on who dares to look. Of course, they might just be a bit vain. To tame their whims, you’ll learn how to frame images with CSS and breathe life into them. With the right techniques, you can make them shrink, grow, or shine majestically with a shadow effect. After all, what’s magic without a touch of style?

Your Task: Styling Images

Scalable Images:
For the class .responsive-image, use the properties width: 100% and height: auto to make the image scalable and flexible.
Styling with Borders and Border-Radius:
Apply a border (border: 2px solid darkgreen) and rounded corners (border-radius: 35px) to the .styled-image class.
Add a shadow effect with box-shadow: 5px 5px 15px #00000083.
Dynamic Adjustments with Object-Fit:
For the class .obj-fit, use the property object-fit: cover to ensure the image scales proportionally.
Set the height and width to 300px for this class.
Using Filters:
Experiment with filters for the .styled-image class, such as:
grayscale(50%)
blur(5px)
brightness(1.2)

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

.responsive-image {
    width: 100%;
    height: auto;
}

.obj-fit {
    width: 300px;
    height: 300px;
    border: 7px solid mediumorchid;
    object-fit: cover;
}

.styled-image {
    border-radius: 35px;
    box-shadow: 5px 5px 15px #00000083;
    filter: grayscale(1);
}

Let’s Keep Going