From the course: CSS: Transforms and Transitions
Join today to access over 25,500 courses taught by industry experts.
Solution: Matrix transformation challenge - CSS Tutorial
From the course: CSS: Transforms and Transitions
Solution: Matrix transformation challenge
(mellow music) - [Presenter] In this challenge, you were asked to write code to create the transformation effects shown on this webpage for four figure boxes containing images and figure captions so that when the mouse pointer hovered over each of the four figure boxes, the image would move and rotate below the figure caption and the figure caption would increase in size to fill the vacated space. Now let's look at the code to create this effect. For my style sheet, I had four different style rules. The first applied to image elements which were nested within figure boxes within the article element. I first added a box shadow with zero pixels of offset in both the horizontal and vertical directions and a zero pixel blur size and the color black. I set the origin of the transformation to left bottom and I applied to transition that would change the box shadow and transform style over an interval of one second. For figure…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.