Home Animation / CSS / Tutorials

CSS Mouse-Out Transition Effect

CSS Mouse-Out Transition Effect

In this article, I will again share tutorials entitled CSS Mouse-out Transition Effect.

This is quite interesting, if you want to try it or install it on your website or blog, please pay attention to the entire CSS code below.

h1::before {  
  transform: scaleX(0);
  transform-origin: bottom right;

h1:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;

h1::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: hsl(200 100% 80%);
  z-index: -1;
  transition: transform .3s ease;

h1 {
  position: relative;
  font-size: 5rem;

For the implementation of its HTML, you just have to write it like this.

<h1>Hover Me</h1>

What do you think? Pretty good right...

Okay, maybe I think that's enough for today's discussion, hopefully, it's useful.

Also read:

No comments:

Post a Comment

Attention Before Commenting and Pay Attention to The Following Policies!!!

Commenting Rules:

1. Don't Spam
2. No Active Links
3. Comment Wisely
4. Profanity, Foul Language, Harassment, and So on.