Introduction
In CSS, the hover effect is commonly used to make websites more attractive. Today, we will explore this thoroughly and learn how to use it through various techniques. If you're already familiar with this, no worries! We can accomplish many more things with hover. Today, I’ll reveal some lesser-known techniques that might surprise you.
After reading this article, I’m sure you’ll find something interesting. I used to use hover normally too, but over time, I realized we could do something extraordinary with it. Let’s get to the point!
Hover works as a trigger. If we add a :hover pseudo-class to any element, it activates when the user hovers the mouse over that element. It’s used to transform styling from its primary state to a secondary state.
Have you noticed that when you hover over a button, its background-color changes from blue to red? This effect is achieved using the CSS :hover pseudo-class. I applied the :hover pseudo-class to the button and specified that its background-color should change to red when the user hovers over it.
In addition to this basic effect, you can achieve even more interesting results with the :hover pseudo-class. Below, I've listed several buttons for you to experiment with. Each one behaves differently to demonstrate the variety of effects you can create using the :hover pseudo-class.
Surprised? Yes — all of them use the :hover pseudo-class! Yes, they are all created using the :hover pseudo-class, but with different techniques. Some of these techniques involve additional CSS properties or slight variations on how the hover effect is applied. My goal in this article is to reveal these hidden techniques so that you can make the most out of the :hover pseudo-class in your web designs.
I have used buttons as examples. However, we can use the :hover pseudo-class on any element to change its primary state to a secondary state when the user hovers their mouse over it.
How to use it?
Using :hover is simple. Here’s the basic structure: class.
Element:hover { // styling statement here }Quite simply, this is the structure of the class. You might still be confused, so check out the demo below, which includes code examples that change the button’s background-color from blue to red.
Have you seen that we have used .my-button:hover{background: red;}, which ensures that when the mouse hovers over the button, its background color will change to red?
So, the code written within the .my-button:hover pseudo-class will only execute once the mouse hovers over the button. The :hover pseudo-class acts as a trigger. Now let’s explore some amazing techniques for using this.
Hover on Parent Affects Child
Maybe you will be a bit confused about the heading I have used above. Don’t worry, you will understand this shortly. Above, we studied how to change any element's styling using the :hover pseudo-class when hovering over that element. However, in this case, we will achieve something special using the same class with slightly different techniques. What am I talking about? You can check the example below:
Have you seen how the child element's background-color changes when hovering over the parent element? Normally, this wouldn’t happen, but this is a technique that can be used to achieve a specific effect. You can check the video below, where I have used this method to create a sub-child menu for my company website.
This sub-menu is fully created using CSS. It is using the same technique that we're currently discussing. I always thought that by using the :hover pseudo-class, we could only change the styling of the specific element where the hover is applied. I didn’t know this was possible either. I learned this technique about half a year ago when I had the opportunity to design a card that needed to display product details only when the card was hovered over. You can see this card in action here:
REGEN iPhone 11 Backfront Purple
It displays the product details when we hover over the image. You can check the code below:
As you can see, we used the following CSS rule:
.feature-section-image:hover .feature-section-content {
opacity: 1;
}
Let’s break this down:
.feature-section-image:hover ensures that when the parent element is hovered over, the styling of the .feature-section-content is changed.
Note: This technique works only for applying effects from a parent to a child element. It will not work if we try to apply an effect to the parent by hovering over the child element.
Now, let's move forward to cover the next techniques. I'll show you how to use the ::before and ::after pseudo-elements, as these allow us to enhance elements further.
Using ::before and ::after with Hover
We can add extra styling using these pseudo-elements in CSS. There are two pseudo-elements: ::before and ::after, which serve the same purpose. You can check this demo below, where I have used ::before to create this button.
You might be confused about what the ::before pseudo-element did in the button. To fully understand this topic, it requires a more in-depth article. However, in this article, I can’t explain all the details. I’ll try to help you understand what it means here in the button. Play with this example to better grasp it.
.hover-button-intactive-example::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: rgba(18, 121, 218, 0.856);
transition: 0.5s;
z-index: -1;
}Have you noticed how the blue color layer size increases from left to right, along with width as you increase the input range slider? This is a visual container created by the ::before pseudo-element in the button.
See, We have created a virtual container using the ::before pseudo-element, which is executed later when the button element is hovered, similar to how we change a child element's styling using the parent. So, the ::before pseudo-element is a virtual child element of the button element.
Using Hover with Animation
Using hover with animations can be quite handy, and you'll often find situations where it’s useful. Let’s explore when you might want to use it. For example, imagine you need to create a button that shakes when you hover over it. I’ve already shown you a similar button earlier, but let’s take another look at it here.
This is the button I’m referring to. Have you noticed how it shakes when you hover over it? Want to understand how this works behind the scenes?
Let’s break it down. A shaking effect cannot be achieved without using animation in CSS. In this case, the animation makes the button "shakable." However, we used a technique that ensures the button only shakes when the hover effect is triggered. This means we are applying an animation to the button, but it only runs when the mouse hovers over it.
In the example below, I’ve created a similar button but without the :hover pseudo-class. This time, the animation runs continuously without needing to hover over the button.
The animation that executes after hovering over the button happens because we started the animation within the .shake-button:hover pseudo-class, rather than in the simple button class.
There are many other ways to use the :hover pseudo-class, but I’ve covered a few of them that are quite crucial and commonly used in development. However, In the future, I will update this article if I come across useful techniques, like the ones I’ve shown above. These are some techniques that have personally helped me in development.