Build along to create a card hover effect

With this cool hover interaction, you can reveal different cards in an instant—not only grabbing users’ attention but letting them see more content without any clicks. Okay. Let’s recreate it. And if you like, build along as you watch.

We’ll start by making the section taller. Let’s drag it to… say 590 pixels.

Now I’m gonna add a container and align it to the top left.

Next, we’ll turn on advanced sizing and adjust the container’s width to 100vw and its height to 100 percent.

Now let’s apply Advanced CSS Grid to the container by selecting it here in the floating menu.

Okay, I’m gonna split the container into two columns.

Let’s resize the left column to 8vw.

Right, time to add some visuals. Go to the Add panel, drag an image across to the right cell and stretch it out.

Let’s update that image by going to Change image.

This is a website for fruit juice so we’ll select this wild berries pic.

I’d like more focus on the left side of the image so I’ll adjust the Focal Point here. There we go.

Okay, let’s now add an image to the left cell by selecting the location in grid cells. And stretch it.

Change the image again and this time, we’ll choose this pink gradient.

We’ll adjust the focal point so we have this nice blend of purple and pink.

Now, let’s add another image to the left cell taking the same steps as before. 

We’ll stretch it again and then change it to this gray image.

I’m gonna add a title by dragging this text box to the cell.

We want the text to run vertically so select Vertical in the Inspector panel and rotate it 180 degrees by dragging this arrow icon.

Next, change the responsive behavior to Hug.

Then align the text to the right and drag it towards the top of the cell.

Okay, let’s give our card a title and change the text to Wild berries.

We’ll also change the text color to light gray in the Color Picker.

Now, let’s add a paragraph to the top left corner of the right cell, aligning it with the Wild berries text.

Pick whatever font you like. Here I’ll change it to Helvetica bold. You can find your font faster by typing in the first few letters like I do here. Let’s adjust the font size to 18 pixels and its color to white.

Next, set the text’s responsive behavior to Wrap.

We’ll adjust the width of the text bounding box by dragging it from the side. 

Then, we’ll edit our text. Here I’m pasting in our new paragraph.

Now we’ll add a button to the right cell by dragging it from the Add Panel. 

Let’s place it right about here.

Next, we’ll give our button a facelift, first by adjusting its background opacity to 0 percent… its font size to 30 pixels… and its color to white. We’ll also customize its borders, setting the line size to 2 pixels and giving the corners a nice curve. Finally, we’ll change the text, resize and reposition it.

Okay, let’s stack our elements so they don’t overlap for different breakpoints. 

Using the shift key, select the paragraph and button. Then click Stack in the floating menu.

We can check how it looks on tablet by selecting the tablet icon at the top. All good here.

Okay, how are we looking on mobile? Well, you can see we need to make some adjustments.

First, I'll change the stack to vertical.

Then, I’ll select the container and adjust its layout to two rows.

Next, we’ll adjust the section’s height. Select the section and change it to… 100. Okay, great.

We’ll change the size of the first row. Select the grid and here in the Layout section we’ll set its height to 15vh. And we'll set the second row's height to 1fr. Now that we made these changes, we need to set the section's height back to 100vh.

Now for the card’s title. On mobile, we’ll change the text orientation to horizontal.

We’ll position our title at the middle of the top row and turn it 180 degrees.

Finally, I’ll change the font size to 45 pixels and align it to the center.

Next up, let’s select the container and change the first row’s height to 15vh.

Our paragraph looks a bit narrow. We’ll make it wider by dragging the text box to round about here.

Let’s also select the stack and align it to the center.

It’s always good to rename your containers so it’s clear which one you’re working on. Go to desktop view and then the Layers tab. We’ll name it Berries.

Okay, now we’ll move on to the second card. We’ll duplicate the container by clicking the three dots and selecting Duplicate.

We’ll rename this one Apple.

For this new container, I’ll align it to the top and to the right.

Next, we’ll change its size and make it a bit smaller than the first to create a layered effect. Change the width to 92vw.

And in the Layout section, we’ll set the left column to 8vw.

Then it’s time to replace our placeholder text with some inspirational copy for our fruit juice. And change the text elements and images like we did for our previous card.

Okay. Let’s check how things look on smaller devices. All good on tablet.

For mobile, we need to make some minor tweaks. I’ll select the container and change its height to 85vh.

I’ll align it to the bottom.

Now I’ll select the container’s top row and set its height to… 15vh.

Okay, onto our last card. First, we’ll duplicate our container again. Let’s go back to layers, select the container and duplicate it.

Let’s call this one Orange.

Again, we need to align the container to the top and to the right. Like so…

Okay, our content doesn’t quite say ‘orange’, so again, let’s update the card’s image and text, like we did with the others.

I’ll also change the container’s width to 84vw.

And adjust the left column to 8vw.

And adjust the left column to 8vw.

As before, we’ll check our design on smaller breakpoints. First, tablet, which is looking good. And then mobile. Again, just a couple of changes needed.

Let’s adjust the container’s height to 70vh.

Then we’ll select the top row of the container and set it to 15vh.

Let’s return to the desktop breakpoint and add the hover animation. Select the Berries card and in Animations and Effects, go to Hover and select Add.

For the animated element, we'll select Choose on canvas. Now, choose the section itself so we we'll be able to animate all the elements within it. I find it easiest to do this from the Layers Panel.

Next, we’ll create a custom animation.

Let’s start with the Wild berries card and change the text to black.

Now, let’s set the animation’s end time to 0 so it starts immediately on hover.

Next, select the card’s gray background. Set its opacity to 0 percent and its end time to 0 too.

Now select the Cherry Orange card, set the text color to gray and its end time to 0.

I’ll do the same with the Cherry Orange image, setting its end time and opacity to 0.

Now I’ll get the the Cherry Orange container to move horizontally by setting the X translate property to 76vw.

Finally, we’ll also set the Green Apple container’s X translate property to 76vw.

And that’s our first animation complete. Let’s click Play to preview it. Nice, I’m happy with that.

Okay, time to add the hover animation that’ll be triggered by the Apple card. 

We’ll choose this container and then click Hover and Add.

We take the same steps again in choosing the section to animate and adding a custom animation.

Now, choose the gray background image in the Green Apple container and set its opacity to 0 percent and end time to 0.

We’ll move to the text now. Let’s change it to gray and set its end time to 0.

We’ll also set the opacity of the Orange image to 0% and its end time to 0.

Again, I’ll set the X Translate property of this card’s container to 76vw.

That’s our second animation complete. We’ll hit Preview to see how it looks… 

And we can see that card movement really kick in. So we’re on the right track.

But let’s make a few adjustments to the animation on mobile.

First, we need to add a Custom hover animation to the Wild berries card.

Change the Wild Berries title text to black.

Select the card’s gray background image and set its opacity to 0% and end time as 0.

And do the same for the title.

Set the orange gradient image opacity to 0.

Now, change the Cherry Orange font color to light gray.

Next, we’ll go through the usual steps of setting the animation end time to 0.

We’ll select the Cherry Orange container and set its Y Translate property to 55vh so that it moves vertically.

And do the exact same for the Green Apple container.

Okay, let’s take a look at the animation so far. That’s shaping up to how we want it to look. Click Done.

We’re nearly there. We just need to add a different custom animation to the Green Apple container.

We’ll set the Cherry Orange font to light gray.

Set the image opacity to 0 percent.

Next, select all the elements and set the end timing to 0.

Okay, let’s change the Green Apple font to black.

I’ll choose the gray background image for the Cherry Orange card and set its opacity to 0 percent and end time to 0.

Now, we’ll set the Cherry Orange container’s Y Translate property to 55vh.

Finally, select all elements and set the end timing to 0.

We’ll take a look at the animation in action and click Done.

That’s it! Let’s go back to desktop and hit Preview. And there you have it, our slick card hover effect in action. And it looks just as good when we switch to mobile. Remember that hover interactions are converted to one tap interactions on tablet and mobile devices.

Thanks for watching. To learn more about what you can do with Wix Studio, check out more Academy tutorials.