In this section we’ve created a hover effect that transforms the entire image on screen with the simple swipe of a cursor. Stay watching as we show you how to recreate it on Studio. Feel free to build along.
Okay, starting with our new section, we’ll go to our Inspector panel and turn on Advanced settings.Then we’ll set our section height to 100vh. From the Add panel, I’m gonna add a container. Let’s turn on Advanced settings again.
And set the width of our container to 100VW and its height to 100VH.
We’ll set the background opacity of the container to 0 percent and then start adding our photos.
Go to "Add Media" and we’ll select this one first. Repeat this process until all five are added to our container.
Let’s rename our images in the Layers panel to make things clear for ourselves when it comes to our animations. I’ll go with Background and number the others 1 to 4.
Next, we’ll go back to our section and add a small logo for our earbuds company. I’ll resize it and position it up here in the top left corner.
Okay, let’s bring in text for our menu and customize it. I’ll go with the Space Notorious font, change its size to 16 pixels and its color to white.
Now to complete our menu, we’ll duplicate this text three times and update it.
Let’s stack and position our two text elements that will be aligned on the right. And do the same with our two text elements and logo on the left. Then, we’ll stack the whole header.
Right, let’s add our main logo, AMP Plus. We’ll increase its size and position it over here to the left.
Then add our paragraph. We’ll update its font, keeping it consistent with our other text, and change its size to 16 pixels and color to white. I’ll copy across our new text…
And stack the paragraph and main logo.
Let’s add a new container, which we’ll need for our animations.
Stretch it, go to the inspector panel and apply CSS Grid. Then select the 2 by 2 layout.
Finally, change the background opacity to 0 percent.
Now we’ll add a new container to each grid section. We do this here, in the Inspector panel.
We’ll stretch each one out and again, change our background opacity to 0 percent.
Okay, let’s keep things in order and rename our containers and sections in our Layers panel.
Time to add another container to the main section.
Stretch it and set the background color to black.
From our Site media, let’s select the cursor icon and center it.
We’ll add an Entrance animation.
Choose Spin...
And we’ll customize it—setting its Spin count to 4, its scale to 100, Duration to 2.3 and Delay to 0.
Let’s hit Preview to take a look...Awesome, it’s got a nice spin to it.
Now go back to the Layers panel and let’s bring this whole container under our main container.
Okay, let’s add another container to the section.
We’ll stretch it and select a white background color.
Let’s add an Entrance animation.
We want this effect to Slide.
We’ll change its duration to 1 second and give it a delay of 1.6 seconds.
Back in the Layers panel, let’s drag this container under our main one.
Now I’m gonna add more animations to our four containers starting with Container 1.
We’ll give this one a Hover animation.
Here, we’ll go with Choose on canvas and select Image 1 as the animated element.
Now we’ll add an Appear animation.
Repeat this for the other three containers, selecting the corresponding image as the animated element.
Awesome, now all that’s left to animate are the hidden images. So let’s start by selecting Container 1.
And add a hover animation.
This time we’ll choose Reset on hover…
And select Image 2 to hide.
Again, we’ll repeat this process for our three other images.
And our three other containers
Okay, nearly there. We’ll finish by adding an Entrance animation to our Main container.
Finally, let’s add our entrance animation to the Main Site container.
Select Slide.
We’ll give it a Duration of 1.6 seconds and a 2.2 second delay.
Before we Preview, we need to add our cursor image.
Okay, let’s take a look. We’ve got our cool spinning cursor entrance and then when we hover across the screen our different images appear. Now that’s a site worth browsing.
If you enjoyed this Build Along, there’s plenty more to check out in the Wix Studio Academy. Join us there!
.png)
