Как изменить размер позиции и изменить цвет фона - PullRequest
Новая
       38

Как изменить размер позиции и изменить цвет фона

0 голосов
/ 10 мая 2018

Привет, ребята, у меня есть проблема, у меня есть изображение, и когда я наведу на него курсор, цвет фона изменился, и я хочу изменить размер и положение.

вот мой 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.io/anon/pen/xjWgWx?editors=1000

и я хочу сделать так

enter image description here

кто-нибудь получил предложение или что-то? я уже пробовал background-size, но ничего не случилось. спасибо за вашу помощь

Ответы [ 4 ]

0 голосов
/ 10 мая 2018

Вы можете сделать что-то вроде ниже: 

.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>
0 голосов
/ 10 мая 2018

Добавьте следующее свойство 

.hoverme:hover {
    transform: scale(1.2);
}
0 голосов
/ 10 мая 2018

Используйте radial-gradient вместо цвета фона, и вы можете легко контролировать его положение и размер: 

.hoverme:hover {
  background-image: radial-gradient(circle at center, #f7b0ee 50%, transparent 0);
  background-position:0 -20px;
  background-size:100% 100%;
  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 center, #f7b0ee 50%, transparent 0);
  background-position:120px 100px;
  background-size:0% 0%;
  background-repeat:no-repeat;
  /*border-radius: 50%; no more needed*/
  transition:all 1s;
}
.hoverme:hover {
  background-size:100% 100%;
  background-position:0 -20px;
}
<img class="hoverme" style="width: 40%;" src="https://preview.ibb.co/e00h5d/yes_student.png">
0 голосов
/ 10 мая 2018

Попробуйте это,

Также не добавляйте переход на псевдо-классах (например, 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>
...