Блог

Ссылка на веб-сайт

Если вы посетите раздел сервисов на главной странице (с дизайном веб-сайта, графическим дизайном, значками поискового маркетинга и конверсий WordPress), вы заметите, что изображения и текст под ними будут увеличиваться в размере при наведении на них курсора. Но я просто хочу, чтобы размер изображения увеличивался (не текст). CSS, который в настоящее время определяет размер области обслуживания (без наведения и с наведением), является:

 .service-icon img {
    width: 100px;
    height:95px;
}
.service-icon img:hover{
    width: 110px !important;
    height:100px !important;
}
  

Класс «service-icon» должен применяться только к значку, так почему же тогда текст также реагирует?

Я также попытался применить этот стиль к определенному классу image:

 /*.service-icon img:hover{
    width: 110px !important;
    height:100px !important;
}*/

.attachment-post-thumbnail, .size-post-thumbnail, .wp-post-image:hover {
width: 110px !important;
height: 100px !important;
}
  

Но это не дало мне никакого результата — размер изображений / шрифта вообще не увеличился. На данный момент я не знаю, что еще попробовать. Это веб-сайт WordPress с пользовательской темой, и вы заметите, что изображения изначально анимированы с помощью плагина CSS3 Animate-It. Спасибо за ваши предложения.

РЕДАКТИРОВАТЬ: обновленный CSS:

 .service-icon img {
    width: 100px;
    height:95px;
}

.service-icon img:hover{
    transform: scale(1.1);
}

/*.service-icon img:hover{
    width: 110px !important;
    height:100px !important;
}

.attachment-post-thumbnail, .size-post-thumbnail, .wp-post-image:hover
{
    width: 110px !important;
    height: 100px !important;
}
*/   
  

Используйте transform: scale()

 .service-icon img {
    width: 100px;
    height:95px;
}
.service-icon img:hover{
    transform: scale(1.1);
}
  

Пример фрагмента

 img:hover {
  transform: scale(1.1);
}  

 <img src="http://placehold.it/200x100/f00" alt="image">
<br>
Hey there, I'm not moving