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:
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.
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.
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.
.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.
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
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.
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: