我有一个图像，当我将其悬停时，背景颜色会发生变化，但我想更改大小和位置。
.hoverme:hover {
background-color: #f7b0ee;
border-radius: 50%;
transition: initial 0.5s ease;
}
<div class="col col-md-6">
<a href="#" onclick="gotofive()">
<img class="hoverme" style="width: 50%;" src="https://preview.ibb.co/e00h5d/yes_student.png">
</a>
</div>
我想让它像这样：
我已经尝试过背景大小，但没有任何反应。
Use 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">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
