Добавить рамку к изображению при наведении курсора

Question

Я просто хочу добавить рамку для изображения с отступами, также мне нужен эффект перехода. Работает нормально, но есть несколько проблем:

1. показывает небольшие движения на изображении при наведении (не зафиксировано)
2. Переходы не плавные.

Я попробовал все.

Я применил box-sizing:border-box;, увеличил изображение до 2 пикселей и удалил его при наведении, но все равно не повезло.

См. пример . Это совершенно нормально, и изображение не движется при наведении.

Вот мой код:

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img {
  border-radius: 50%;
  margin: 2px;
  transition: 0.2s ease-in-out;
}

.home-item1 img:hover {
  border: 2px solid red;
  margin: 0px;
  padding: 2px;
}

<div class="home-item1">
  <img src="http://i64.tinypic.com/2s0ftrc.png" alt="">
</div>

Чего мне не хватает? Пожалуйста, проверьте скрипку и дайте мне знать.

jsfiddle

Answer 1

Я думаю, что все, что вам нужно сделать, - это увеличить переходный период и просто добавить границу к изображению, чтобы граница могла быть хорошо видна при наведении, показывая тем самым водянистый, слегка движущийся эффект на изображение. , Здесь это идет:

    .home-item1 {
      height: 105px;
      width: 105px;
      cursor: pointer;
      box-sizing: border-box;
    }
    
    .home-item1 img{
      border-radius: 60%;
      margin: 2px;
      transition: border 0.6s ease-in-out;
      border: 3px solid transparent;
    }
    
    .home-item1 img:hover{
      border: 2px solid red;
      margin: 0px; 
      padding: 2px; 
    }
   
 

    

<div class="home-item1">
      <img src="http://lorempixel.com/150/150/" alt="">
    </div>

Answer 2

Это будет работать для вас:

Я только что добавил border: 4px solid transparent;, удалил margin и компенсировал его границей, а при наведении перезапустил его. Fiddle

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img{
  border: 4px solid transparent;
  border-radius: 50%;
  padding: 0px;
  transition:all 0.2s ease-in-out;
}

.home-item1 img:hover{
 border: 2px solid red;
 margin: 0px;
 padding: 2px;
}

<div class="home-item1">
  <img src="http://lorempixel.com/110/110/" alt="">
</div>

Надеюсь, это было полезно.

Answer 3

добавление border добавит к размерам элемента div, который вызывает движение. Добавление цвета к прозрачной рамке не приведет к достижению того же эффекта.

Answer 4

• Во-первых, вам нужно добавить transparent border к image, чтобы не будет двигаться, когда завис.
• Во-вторых, увеличить продолжительность перехода, чтобы получить плавный эффект

.home-item1 {
  height: 107px;
  width: 108px;
  cursor: pointer;
  box-sizing: border-box;
}

.home-item1 img{
  border-radius: 50%;
  margin: 2px;
  transition: border 0.5s ease-in-out;
  border: 2px solid transparent; /* Added */
}

.home-item1 img:hover{
border: 2px solid red;
 margin: 0px; padding: 2px; 
}

<div class="home-item1">
  <img src="http://via.placeholder.com/350x150" alt="">
</div>