'How to resize background-color and adjust its position?

I have an image and when i hover it, background color changes, but I want to change the size and position.

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

and I want to make it like this:

enter image description here

I already try background-size, but nothing happens.

htmlcsscss-transitionsbackground-color


Solution 1:[1]

Use radial-gradient instead of background color and you can easily control its position and size:

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

And if you want transition, try this:

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

Solution 2:[2]

Try this,

Also dont add transition on pseudo classes(eg: hover ), The transition wont work. 

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>

Solution 3:[3]

Add the following property

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

Solution 4:[4]

You can do something like below:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Gautam Naik
Solution 3 Akash Pinnaka
Solution 4 Nidhi

Related Questions