FREELessons: 6Length: 38 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Zoom In and Out

In the second lesson of this course, you’ll learn how to create a “zoom in and out” hover effect with CSS. Let’s take a look.

Related Links

2.2 Zoom In and Out

Hello and welcome to the second lesson of this course where you'll learn how to create a zoom in and zoom out hover effect using CSS. So let's take a look. This is it right here. I think it looks really good. It's definitely one of the more popular effects that you can see on the web nowadays, and it's super easy to create. So, let me show you how you can do it. We start with the same framework as in the previous lesson. We just have a gallery of images that currently don't do anything. So, let's begin here, .gallery img. We're gonna use some transforms, or transformations. So, transform, scale. We're gonna set the scale to 1 initially. And we're also setting a transition, and we're transitioning the transform property over, let's say, 0.3 seconds. ease-in-out, you can change the easing if you want. But I think for a small transition like this, this will work just fine. So by default, these don't really do anything. However, on hover also transform scale(1.2), so a little bit bigger than what they were before, right? And this happens. The image now scales up on hover. Now the only problem is that it kind of goes outside of its parent element, which is the list item. So to fix that, let's say, gallery, list item. We can simply hide the overflow. So overflow hidden, and that will take care of the problem. Now when we hover over an image, it expands normally, but that excess is gonna be hidden by the boundaries of its parent element. And of course, you can play around with these scale factor. So maybe you want them to be twice the size, which is a little bit crazy, but you can do that, nonetheless. All right, you can zoom in really close by using this technique. But I think 1.2 should do just fine. And that's it for the second effect. You saw just how easy it is with a few lines of CSS, some transforms, some transitions, and you have a really nice hover effect. Transform's transitions will work cross-browser, and you'll make sure you get a good experience even if you're using some of the older browsers. So those are two very simple effects but what about when you want to display more information about the image. Maybe you want to add a title, a description, a button of some kind, any kind of HTML element on top of the image, maybe an icon. What do you do then? Well, we're gonna explore the next three examples with these kinds of elements. We're gonna add some captions. More specifically, a title and a description to each one of them and you can see just what kind of effects we can create with just pure CSS. So, I'll see you in the next lesson.

Back to the top