Welcome fellow developer! Now let’s use CSS to create a stylish mouse hover effect. Buckle up—this is a step-by-step tutorial!
My attention was drawn to this as I was using CodePen to generate ideas for a new project.
Also, Read – How To Generate Multi-Pages Using HTML
How can I use CSS to generate a Mouse hover effect?
It’s rather simple. Let’s break it first into its component pieces.
Give the background information.
Turn it on when you hover over it.
Make it more animated
Step 1.
Let’s begin by adding some text to an element. I’m going to use a div tag.
<div>Hover Me</div>
Here, we include our “Hover Me” content inside a div tag. Anything you wish to write is allowed, such as “Don’t hover over me!”
Step 2.
The text size is too small by default. Let’s increase it. The font-size property in CSS is used for changing the font’s height and width.
div {
font-size: 70px; /* The px stands for pixels */
}
A font size of 70 pixels should work well in this case. Let’s alter the typeface as well. To declare a list of fonts ranked from highest priority to lowest priority in CSS, use the font-family property.
div {
font-size: 70px; /* The px stands for pixels */
font-family: system-ui, sans;
}
Sans-serif is the secondary font, and System UI is the main font.
Let’s use the font-weight property to make it bold.
div {
font-size: 70px;
font-family: system-ui, sans;
font-weight: 800; /*Font weight of 800 is enough */
}
It looks nice at this point. Let’s put it in the center of the screen for this tutorial.
body {
display: grid;
height: 100vh;
place-items: center;
}
Let’s set the relative display property for it.
div {
position: relative;
font-family: system-ui, sans;
font-size: 60px;
font-weight: 800;
}
Step 3: Add a background to the text
Setting up an animated background for mouse hover is what we want to do. With text backgrounds, though, that is not possible.
How about elements that aren’t real? To create a pseudo-element before the text, we can use ::before.
Let’s add a ::before pseudo-element to the div tag.
div::before {
content: "";
}
We don’t need to insert any material, hence the content property is empty. For the background effect, it is necessary. Let’s explain its history.
div::before {
content: "";
background: yellow;
}
However, nothing took place. This is so that it can’t be seen until certain properties are set.
Inset to 0 and set the position attribute to absolute.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
}
It’s functioning now. However, the text vanished. The reason for this is that the text is in front of the ::before element. In order to push it back, we must set its z-index to -1.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
}
Step 4: Hovering mouse effect
It’s time to add interactive elements now. When the mouse is moved away, it can be hidden and seen respectively.
We must first hide it before we can make it visible. We’ll set its scale to 0 using the transform property. In order to fully hide it, we set the x-axis to zero.
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: The CSS function scaleX() is used to scale an element on its x-axis.
We can now set its mouse hover x-axis scale to 1 to display it.
div::before {
content: "";
background: yellow;
inset: 0;
position: absolute;
z-index: -1;
transform: scaleX(0); /* we use scaleX() to set the x-axis size */
}
The div element always has the ::before scale set to 1 when we hover over it.
Step 5: Animate It
Lastly, we must bring it to our attention. We can use the transition property to accomplish that.
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 */
}
Lastly, we must bring it to our attention. We can use the transition property to accomplish that.
We have “ease-in-out” for the animation, 0.5 seconds for the duration, and transform for the transition property. Here is further information regarding transition properties.
It is emerging from the center and disappearing, as we can see.
However, we can have it emerge on mouse-in from the left and disappear on mouse-out to the right.
We can make advantage of the transform-origin feature for that. Go here to find out more about the transform-origin property.
div:hover::before {
transform: scaleX(1);
transform-origin: left; /* we set its origin to the left on mouse hover */
}
It is now emerging from the left. But disappearing from the middle.
With the mouse out, let’s move its origin to the right.
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
See the Pen Mouse hover effect by CodeWorks4U (@CodeWorks4U) on CodePen.
Conclusion
Simple CSS techniques are used to build sophisticated UI and animations. That is CSS’s strength. Here, we’ve made this fantastic animation using the scaleX() function and the CSS::hover pseudo-element.
Also Use Our Online Code Editor Here –
