Mouse Hover Transition Effect with HTML

Starting things off light, this animation shows a simple but effective text highlight effect triggered by a mouseover action. It’s a great way to add some extra flair to your page links.

View the code here.

<!DOCTYPE html>

<html>

<head>

  <title>Mouse Hover Transition Effect</title>

  <style>

    /* Add styles to the element you want to apply the transition effect */

    .hover-effect {

      width: 200px;

      height: 200px;

      background-color: #f00;

      transition: transform 0.5s;

    }

    

    /* Add styles to the element when it's hovered over */

    .hover-effect:hover {

      transform: scale(1.2);

    }

  </style>

</head>

<body>

  <div class="hover-effect"></div>

</body>

</html>