CODEWITHSUNDEEP
htmlcssanimationhover
Drewdavid
Drewdavid

Reputation: 3192

Animated circle revealing background image on hover

I'd like to hover over an element and have a background image be revealed with a circular border in an animated fashion (think the opposite of when a spotlight closes in on a character, leaving them in blackness, eg in Mario games... heh).

This is my current attempt, which based on Neri_Y's answer to How to create a circle hover reveal when hovering over a picture (and might not be the right approach for this):

.icon::after {
  content: "";
  position: absolute;
  left: -5em;                 /* adujust this value */
  top: -5em;                  /* adujust this value */
  width: 20em;               /* adujust this value */
  height: 20em;              /* adujust this value */
  transform: scale(0);
  border-radius: 50%;
  z-index: -1;
  background-image: url(https://i.imgur.com/Yb4Uyux.png);
  transition: all 0.2s ease-out;
}

.icon:hover::after {
  transform: scale(1);
}
<div class="icon">@<div>

Notes:

  1. As you can see right now, the issue is that the entire image grows, whereas I just want the circle to grow.

  2. Also, I want the circle to grow from the midpoint of the element (or the point of the cursor would also work), whereas this seems to expand from the centre of the image?

Upvotes: 0

Views: 738

Answers (1)

Temani Afif
Temani Afif

Reputation: 274384

clip-path can do this:

.icon::after {
  content: "";
  position: absolute;
  inset:-5em;
  clip-path:circle(0);
  z-index: -1;
  background: url(https://i.imgur.com/Yb4Uyux.png);
  transition: all 0.2s ease-out;
}

.icon:hover::after {
  clip-path:circle(50%);
}

.icon {
  margin:5em;
  width:1em;
  height:1em;
  display:inline-block;
  position:relative;
}
<div class="icon">@<div>

Upvotes: 2

Related Questions