html - How to resize a background-color and adjust its position?

Question

Hello guys i have some problem, i have an image and when i hover it, background color changed and i want to change the size and position.

here is my html

<div class="col col-md-6 hoverme">
    <a href="#" onclick="gotofive()">
        <img style="width: 70%;" src="assets/images/yes_student.png">
    </a>                        
</div>

and this is my css

.hoverme:hover {
    background-color: #f7b0ee;
    border-radius: 50%;
    transition  : initial 0.5s ease;
}

here is the result https://codepen.io/anon/pen/xjWgWx?editors=1000

and i want to make it like this

anyone got suggestion or something? i already try background-size, but nothing happen. thanks for your help

标签： htmlcsscss-transitionsbackground-color

Answer 1

使用radial-gradient而不是背景颜色，您可以轻松控制其位置和大小：

.hoverme:hover {
  background-image: radial-gradient(#f7b0ee 50%, transparent 51%);
  background-position:0 -20px;
  background-repeat:no-repeat;
  /*border-radius: 50%; no more needed*/
}

<img class="hoverme" style="width: 40%;" src="https://preview.ibb.co/e00h5d/yes_student.png">

如果你想要过渡，试试这个：

.hoverme {
  background-image: radial-gradient(circle at 50% calc(50% - 20px),#f7b0ee 50%, transparent 51%);
  background-position:center;
  background-size:0% 0%;
  background-repeat:no-repeat;
  /*border-radius: 50%; no more needed*/
  transition:all 1s;
}
.hoverme:hover {
  background-size:100% 100%;
}

<img class="hoverme" style="width: 40%;" src="https://preview.ibb.co/e00h5d/yes_student.png">