Как исправить hover?

Question

[AlexMark]

и



хром и мозила соответственно

<div class="soc_button">
										<a href="#" class="insta_ref">
											<i class="fa fa-instagram" aria-hidden="true"></i>
										</a>
									</div>

.soc_button{
      padding-top: 16%;
    padding-left: 33%;
}

.soc_button a{
  padding: 5px;
  font-size: 20px;
  position: relative;
  transition: all 0.4s ease;
}


.soc_button .insta_ref{
  color: #C42E85;
}


.soc_button .fa{
  position: relative;
  z-index: 1;
}


.soc_button a:after{
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 0;
  width: 0;
  transition: all 0.4s ease;
}
.soc_button a:hover{
  border-radius: 50%;
  color: #fff;
}

.soc_button a:hover:after{
  height: 90%;
  width: 90%;
}


.insta_ref:hover:after{
  background-color: #C42E85;
  width: 105% !important;
}

Answer 1

[HamSter]

задайте не относительные высоту и ширину :after, а фиксированные + :hover:aftertransform: scale(1.1);.

Пример на jsbin

Comments

[AlexMark]

извините, что не отвечал долго... зашел в мозилу с ссылкой на ваш пример и оно в мозиле выскакивает вправо.... То-есть проблема остается. Или у вас все нормально показывает в лисице?

[HamSter]

AlexMark: Вы же с префиксами используете transform, transition? У меня все нормально

[AlexMark]

HamSter: да... вы об этом (-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);)...
почему то у меня всеравно ховер уплывает....