CODEWITHSUNDEEP
csscss-transitions
Stickers
Stickers

Reputation: 78676

Reveal background image from the center

I'm working on rounded avatar with hover effects, by default there is a semi-transparent overlay on top of the background image, and it reveals the image on hover.

The question is, would it be possible to have the overlay to disappear from the center of the box on hover? Right now it's the opposite.

jsFiddle

.avatar {
  position: relative;
  background: url("https://i.sstatic.net/zBjxW.jpg") center / cover no-repeat;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.avatar:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(0, 0, 255, .5);
  transition: width .5s, height .5s;
}

.avatar:hover:before {
  width: 0;
  height: 0;
}
<div class="avatar"></div>

Upvotes: 0

Views: 291

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105863

Yes, You could use an inset shadow for this kind of effect:

.avatar {
  position: relative;
  background: url("https://i.sstatic.net/zBjxW.jpg") center / cover no-repeat;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  box-shadow:inset 0 0 0 105px rgba(0, 0, 255, .5);
  transition:0.25s
}


.avatar:hover {

  box-shadow:inset 0 0 0 0 rgba(0, 0, 255, .5);
}
<div class="avatar"></div>

Upvotes: 5

Related Questions