Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CSS: Images

via LinkedIn Learning

Go to class Write review

Details

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

2 hours 4 minutes
Sessions

On-Demand
Level

Beginner

Found in

Coursera

Save 43% on 1 Year of Coursera Plus

Boot.dev

The Most Addictive Python and SQL Courses

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Learn how to manipulate images and shapes to create distinctive visual effects in CSS.

Syllabus

Introduction

Working with images in CSS
Exercise files
Using GitHub Codespaces with this course

1. Basics

Modern image markup
Getting rid of the space underneath an image
Fitting an image inside any container
Create a square (or other proportion) image
Position an image inside a container
Use CSS to crop an image
Fitting an image inside a grid cell
Fitting an image inside flexbox
Fitting background images to any container
Position background image within a container

2. Shapes

Rounded corners with border-radius
Cropping images to a perfect circle
Custom shapes using clip-path
Clip-path: Circle
Clip-path: Ellipse
Clip-path: Polygon
Clip-path: Inset
Clip-path: Path
Custom shapes using SVG
Masking an image with another image
Image text
Browser compatibility

3. Filters and Blending

Filtering and blending
Filters overview
Combining filters
Using custom SVG filters
Mix-blend-mode
Experimenting with blend modes
Background-blend-mode

4. Practical Use

45° grid gallery
Animated effects
Blend mode image enhancement
Things to keep in mind

Conclusion

Thanks!

Taught by

Morten Rand-Hendriksen

Reviews

4.9 rating at LinkedIn Learning based on 137 ratings

Start your review of CSS: Images