CODEWITHSUNDEEP
css
chicken burger
chicken burger

Reputation: 774

CSS round div fill-in on hover

I tried to make a little effect while hovering a round div, but I couldn't find how actually to make the fill in in a round shape too.

As you can see the fill in is in a square shape, and I would like to have it in the shape of my div (round in this case) Is there a solution to that in CSS?

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background-image: linear-gradient(blue, blue);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
}

.circle:hover {
  background-size: 100% 100%;
  color: blue;
}
<div class="circle"></div>

Upvotes: 3

Views: 5127

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106038

You can use radial-gradient or box-shadow

  • box-shadow

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background: blue;
  transition: box-shadow .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
  box-shadow: inset 0 0 0 50px white
}

.circle:hover {
  box-shadow: inset 0 0 0 0px white;
  color: blue;
}
<div class="circle">
</div>

  • radial-gradient

.circle {
        height: 50px;
        width: 50px;
        margin: 35px;
        border: 3px solid blue;
        background-image: radial-gradient(circle at center , blue 50%, transparent 50%);
        background-repeat: no-repeat;
        transition: background-size .5s, color .5s;
        background-size: 0 0;
        background-position: 50% 50%;
        border-radius: 30px;

    }

.circle:hover {
    background-size: 200% 200%;
    color: blue;
}
<div class="circle">
</div>

Upvotes: 4

Stickers
Stickers

Reputation: 78736

You can fill the circle and set animations with a pseudo element.

.circle {
  height: 50px;
  width: 50px;
  border: 3px solid blue;
  border-radius: 50%;
  margin: 35px;
  position: relative;
}

.circle:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: blue;
  border-radius: 50%;
  width: 0;
  height: 0;
  transition: all .5s;
}

.circle:hover:before {
  width: 100%;
  height: 100%;
}
<div class="circle"></div>

Upvotes: 3

Related Questions