From the course: CSS: Enhancing Interfaces with Animation

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Solution: Create a card animation

Solution: Create a card animation - CSS Tutorial

From the course: CSS: Enhancing Interfaces with Animation

Start my 1-month free trial

Solution: Create a card animation

(upbeat music) - [illustrator] Okay, so hopefully you gave that a try and you tried the animation maybe you got closed or you completed it all. If you didn't, we're going to walk through it now together. So, I'm staying in-branch zero three zero three, just so I can put the code in, but the finished code is in branch zero three zero four. Okay, so, we have where our hover animations need to go. So, let's think a minute about what we need to animate. We go back to our animation here. Again we have this robot image, it's inside that robot div the image is and it's currently visible. So, we want to make it disappear so that we can have just full focus on that mask and the H2 and the link. So, when I Hover over, I see that the robot is not only just disappearing, but also getting bigger almost as if it's going away, like it's growing, in front of you. So, it goes a lot bigger. So, we'll need to add a transform for that.…

Contents