Mouse out animation using CSS

December 15, 2021 by Codingthai

Hello learner, welcome back In this article we are going to create a Mouse out animation using CSS. In an earlier post, I have written a few-word article on improving coding skills you can check it out. and another List items hover effect using HTML and CSS. Now it’s time to create a mouse-out animation using CSS.

Mouse out animation using CSS

In the mouse out animation program, There is the hove me animation. if the mouse course goes in the box it hovers from top to bottom with color. The animation transforms from a Y scale. we Have created a div in the body with a class name card and inside the div we have to write text hover me.

In the CSS code, we have to give margin and padding 0. The font family of the text is sans-serif The aligned item should be in the center. The height of the box is 100vh in the body section. In the div card section, the width should be 250px and height should be 300px the content justify should be in the center if are confuse about the code do check out the video below

Video Tutorial on Mouse out animation using css

In this video tutorial, you are going to learn to create Mouse out animation using CSS step by step. If you know the basics of HTML and CSS coding then this is easy for you. Now I hope now you can understand the code. If are getting any other error comments down below

Mouse out animation using css [Source Code]

To create a mouse-out animation you have to create two HTML and CSS files named index.html and style.css in the same folder. Go check the video by step by step process to create mouse out animation. You should link the CSS file to HTML. Paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code.

At first, you have to create an HTML file named index.html and paste the below code on it, and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<!--Created by Codingthai.com-->
<html>
    <head>
        <title>Hover me </title>
        <link rel="Stylesheet" href="style.css">
    </head>
    <body>
        <div class="card">Hover Me!</div>
    </body>
</html>
<!--Created by Codingthai.com-->

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.card{
    width: 250px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(54, 54, 54);
    font-size: 2.5em;
    font-family: sans-serif;
    box-shadow: 0   0   30px rgb(0, 0, 0,0.089);
    cursor: pointer;
    transition: color .4s;
    position: relative;
}
.card:hover{
    color: white;
}
.card::before{
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #FF5677;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s;
    z-index: -1;
}
.card:hover::before{
    transform: scaleY(1);
    transform-origin: top;
}

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

Views: 109

Leave a Comment Cancel reply