[CSS 3] Avatar hover effect

Zhentiw發表於2024-10-05
CSS
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>CSS avatar scale</title>
    <style>
        .avatar {
            width: 150px;
            height: 150px;
            background-size: cover;
            border: 5px solid black;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            background-image: url("./girl.png");
        }
        .avatar::before, .avatar::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
        }
        .avatar::before {
            background-color: rgba(0, 0, 0, 0.3);
        }
        .avatar::after {
            background: inherit;
            clip-path: circle(0% at 50% 50%);
            transition: 0.3s;
        }
        .avatar:hover::after {
            clip-path: circle(50% at 50% 50%);
        }
    </style>
  </head>
  <body>
    <div class="avatar"></div>
  </body>
</html>

相關文章