Final part – Another hover effect (3)

For the moment, this will be the last example with just a hover effect that I will show and further on, in my next lessons, I will start to present what steps need to be taken in order to create a drop-down or slide-down navigation bar.

Once again, to make it easier for us, we will use the same structure from our first lesson – Another hover effect (1), and from there we will begin with the CSS code. Our example for today looks like this:

meniu11

Like in our previous lesson, I have already prepared everything we need inside our CSS file – with very few changes, so that we only need to edit the sliding elements.

1.png
The HTML structure and CSS code

We can see that there are two sliding elements which appear and start to move from the button’s center and that they change their position towards its extremities, where they also stop. As usual, I will choose different background colors for the sliding elements, in order to easily identify them: magenta for the one on the left side, cyan for the one on the right side.

2.png

Of course, we need to declare position: absolute; so that we can overlap them, and then we need to place each of them in the right spot, meaning the button’s center.

The .slide-tl (slide-to-left) and .slide-tr (slide-to-right) classes will each get 50px, the first one to the left, the second one to the right. Since we are already here, let’s declare transition: all 0.6s; so that we can see them how they move on mouse-over.

3.png

Now, what we want on mouse-over is that the sliding elements move on their assigned trajectories. The first one to move to the left by 50px – meaning left: 0;, and the second one to move to the right by 50px – meaning right: 0;.

4.png

meniu9.gif

Next, we will hide the sliding elements in their starting position and, during the transition, we will make them appear, we will make them visible. To do this, we need to set the opacity declaration to be zero, in the starting position, and it to be 1 in the final position.

5

meniu10.gif

Now, all that is left to get to the final result, is to set the tiny details, such as a background color for the sliding elements and the hover effect for the button:

6.png

meniu11.gif

Advertisements

Published by

Laurenţiu Bălănescu

Front-end web designer - HTML&CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s