Диаметр окружность при наведении составляет 90% меньшей стороны
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1">
<style>
figure {
background: deeppink;
display: inline-flex;
}
figure img {
transition: 500ms;
--mask:
radial-gradient(closest-side circle, black 90%, transparent calc(90% + 1px))
no-repeat center / 0 0;
-webkit-mask: var(--mask);
mask: var(--mask);
display: block;
}
figure:focus img,
figure:hover img {
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
</style>
</head>
<body>
<figure tabindex="0">
<img src="https://placeimg.com/320/240/animals">
</figure>
<figure tabindex="0">
<img src="https://placeimg.com/640/480/animals">
</figure>
</body>
</html>