Hello, My fellow coders. Now, we will learn to create a cool mouse-in and mouse-out hover effect using CSS. It is a step-by-step guide. This kind of effect is helpful when we need to highlight something important.
When wondering about the new project idea on Codepen, My eyes stuck on this one.
Also, Read- Rolling text effect using CSS
How to create a mouse-in and mouse-out hover effect using CSS?
This one is the simple one. First, let’s divide it into parts.
- Give a background to the text
- Make it appear when the mouse hover
- Add the animation to it
Step 1:
Let’s first create an element with some text in it. I will go for a div
tag.
<div>Hover Me</div>
Here we add a div
tag, and inside that, we have a “Hover Me” text. You can write whatever you want. ie. “Don’t hover on me!”
Step 2:
The default font size is too small. Let’s make it bigger. In CSS, we use the font-size
property to change the height and size of the font.
div {
font-size: 70px; /* The px stands for pixels */
}
Here, 70 pixels are enough for the font size. Let’s change the font as well. In CSS, we use the font-family
property to specify a list of fonts, from highest priority to lowest.
div {
font-size: 70px; /* The px stands for pixels */
font-family: system-ui, sans;
}
system-ui
is the primary font, and sans
is the secondary font.
Let’s make it bold by using the font-weight
property.
div {
font-size: 70px;
font-family: system-ui, sans;
font-weight: 800; /*Font weight of 800 is enough */
}
It is looking fine now. For the sake of this tutorial, Let’s center it on the screen.
body {
display: grid;
height: 100vh;
place-items: center;
}
Let’s change its position type to the relative
.
div {
position: relative;
font-family: system-ui, sans;
font-size: 60px;
font-weight: 800;
}
you can find out more about the CSS position property here.
Step 3: Give a background to the text
We want to set a background that we can animate on mouse hover. But, we can not do this with the text background.
How about the pseudo-elements. We can use ::before
pseudo-element to create the effect. You can find out more about ::before
and ::after
pseudo-elements on this post- CSS before and after pseudo elements
Let’s add a ::before
pseudo-element to the div
tag.
div::before {
content: "";
}
The content property is empty because we don’t need to put any content. We need it for the background effect. Let’s give it a background.
div::before {
content: "";
background: yellow;
}
But, nothing happened. That’s because we need to set some property before it appears.
Add the position type to absolute
and the inset
to 0.
Find out more about inset CSS property.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
}
Now it’s working. But, The text disappeared. That’s because the ::before
element is in front of the text. We need to put it back by setting its z index to -1.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
z-index: -1;
}
Step 4: On mouse hover effect
Now, it’s time to make it interactive. We can make it appear on mouse hover and disappear on mouse out.
To make it happen. First, we have to hide it. We will use the transform
property to set its size to 0. We set the x-axis to 0 to make it disappear.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
z-index: -1;
transform: scaleX(0); /* we use scaleX() to set the x-axis size */
}
sizeX – To resize an element on its x-axis we use scaleX()
CSS function.
Now, we can set its x-axis scale to 1 on mouse hover to make it appear.
div:hover::before {
transform: scaleX(1);
}
Whenever we hover on the div
element, it sets the ::before
element scale to 1.
Step 5: Animate it
Finally, we have to animate it. To do this, we can use transition
property.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
z-index: -1;
transform: scaleX(0);
transition: transform 0.5s ease-in-out; /* We set animation time to 0.5 seconds */
}
We first set the transition
property to the transform
, duration to 0.5 seconds, and the animation to”ease-in-out
. You can find more information about transition property here.
As we can see, it’s appearing and disappearing from the center. But, we can make it appear from the left when the mouse-in and disappear to the right on the mouse-out.
For that, we can use the transform-origin
property. Learn more about the transform-origin property here.
div:hover::before {
transform: scaleX(1);
transform-origin: left; /* we set its origin to the left on mouse hover */
}
Now it appears from the left. But disappear in the center.
Let’s change its origin to the right when mouse out.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
z-index: -1;
transform: scaleX(0);
transform-origin: right; /* we set its origin to right on mouse out */
transition: transform 0.5s ease-in-out;
}
It’s working! Here is the output
Here is the whole CSS file In case you want to copy it.
body {
display: grid;
height: 100vh;
place-items: center;
}
div {
position: relative;
font-family: system-ui, sans;
font-size: 60px;
font-weight: 800;
}
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
z-index: -1;
transform-origin: right;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
}
div:hover::before {
transform: scaleX(1);
transform-origin: left;
}
Summery
In CSS, we use simple tricks to make complex animations and UI. It is the power of CSS. Here we used CSS ::hover
pseudo-element and scaleX()
function to make this cool animation.
With that said. I am afraid I have to go now. Before I go, make sure to share this post on your social media. It only takes 30 seconds to do that. If you have any doubts or want to appreciate then comment.
Or you can leave a dm at @rareprogrammer for chit-chat.