body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: #ccc;
    text-align:center;
}

h1{margin:30px 0 60px}

img {
    --m: radial-gradient(circle farthest-side at right, #000 99%, #0000) 0 100%/46% 92% no-repeat,
        radial-gradient(circle farthest-side at left, #000 99%, #0000) 100% 0/46% 92% no-repeat;
    -webkit-mask: var(--m);
    mask: var(--m);
    filter: grayscale(0.5);
    transition: 0.3s linear;
    cursor: pointer;
    width: 250px;
    height: 250px;
}

img:hover {
    -webkit-mask-position: 7.5% 50%, 92.5% 50%;
    mask-position: 7.5% 50%, 92.5% 50%;
    filter: grayscale(0);
}