如何调整背景色的大小和调整其位置？

Question

大家好，我有一个问题，我有一个图片，当我悬停它时，背景颜色改变了，我想改变大小和位置。

这里是我的html

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

这是我的CSS

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

以下是结果 https:/codepen.ioanonpenxjWgWx?editors=1000。

我想让它像这样

有谁有建议吗，我已经试过背景尺寸了，但是什么都没有发生，谢谢你的帮助。

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">

Answer 2

试试这个

也不要在伪类上添加过渡(例如：hover)，过渡不会工作。

a {
  display: block;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  transition: all 0.5s ease;
}

a:hover {
  background-color: #f7b0ee;
}

.hoverme {
  width: 100%;
  height: 100%;
  transition: all 0.5s ease;
}

.hoverme:hover {
  transform: scale(1.5);
}

.background:hover {}

<div class="col col-md-6">
  <a href="#" onclick="gotofive()">
    <img class="hoverme" style="" src="https://preview.ibb.co/e00h5d/yes_student.png">
  </a>
</div>

Answer 3

添加以下属性

.hoverme:hover {
    transform: scale(1.2);
}

Answer 4

你可以做如下的事情。

.hoverme {
  display: inline-block;
  width: 50%;
  position: relative;
}
.hoverme img {
  position: relative;
  z-index: 20;
}
.hoverme:hover:before {
    content: '';
    height: 66%;
    width: 66%;
    position: absolute;
    top: 15%;
    left: 17%;
    display: block;
    background-color: #f7b0ee;
    border-radius: 50%;
 }

<div class="col col-md-6">
  <a href="#" onclick="gotofive()" class="hoverme">
	  <img  style="width: 100%;" src="https://preview.ibb.co/e00h5d/yes_student.png">
  </a>
</div>