CSS преобразование: масштаб размывает изображение при наведении - PullRequest
Новая
       20

CSS преобразование: масштаб размывает изображение при наведении

1 голос
/ 09 апреля 2020

Я установил lo go в меню нашего веб-сайта, поэтому, когда пользователь наводит указатель мыши, он немного увеличивается. Тем не менее, lo go размывается одновременно при масштабировании. Есть предложения? 

#logo a {
  display: inline-block;
  max-width: 55%;
  transform: scale(.95);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

#logo a:hover {
  transform: scale(1);
}
<div id="logo">
  <a href="https://www.umu.ajt.mybluehost.me/opencart/index.php?route=common/home"><img src="https://www.umu.ajt.mybluehost.me/opencart/image/catalog/logo/logo.png" title="BumperPlugs.com" alt="BumperPlugs.com" class="img-responsive"></a>
</div>

1 Ответ

0 голосов
/ 14 апреля 2020

Попробуйте это. Это должно решить эту проблему. 

#logo a {
  display: inline-block;
  max-width: 55%;
  transform: scale(.95);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}

#logo a img{
  -webkit-backface-visibility: hidden; 
  -ms-transform: translateZ(0); /* IE 9 */
  -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
   transform: translateZ(0);
}


#logo a:hover {
  transform: scale(1);
}
<div id="logo">
  <a href="https://www.umu.ajt.mybluehost.me/opencart/index.php?route=common/home"><img src="https://www.umu.ajt.mybluehost.me/opencart/image/catalog/logo/logo.png" title="BumperPlugs.com" alt="BumperPlugs.com" class="img-responsive"></a>
</div>
...