From the course: CSS: Images
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Animated effects
- [Instructor] One benefit to using CSS to transform images either by changing their shape, changing their size, their position, their color, or anything else is, in CSS, you can usually apply either transforms or animations to those properties. And that's the case for pretty much everything we've covered so far in the course. This allows us to create some really interesting interactive interfaces. And I've created a basic example here, just to show you what's possible and show you how it fits together. First off, I've set up a grid is a two by two grid and then just let the images place themselves in the grid. I've then cropped them down to squares like we've done previously. And then finally, for each of the image elements I've grabbed the figure element that wraps around the image, and applied clip path circle. Now, in this case I've set the diameter of the circle to 100% which means the diameter is the same height…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.