CSS Hover Animation: Easy Guide for Web Designers

1 year ago
Sophia Anderson
1 minute

To achieve a mouse hover animation effect, you can utilize the CSS :hover pseudo-class and transition property. Below is a simple example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            transition: transform 0.3s;
        }

        .box:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, a scaling animation effect is achieved on the .box element when the mouse hovers over it, using the :hover pseudo-class and the transform property. When the mouse moves away, the element returns to its original size. The speed of the animation can be controlled by adjusting the value of the transition property. Different mouse hover animation effects can be achieved by adjusting styles and properties according to actual needs.

bannerAds