2016-10-24 3 views
0

Link to WebsiteCSS - нужно только размер изображения (не текст) увеличить на Hover

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

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

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

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

/*.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 Plugin. Спасибо за ваши предложения.

EDIT: Обновленный 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; 
} 
*/ 
+2

Использовать 'transform: scale (1.1)' – LGSon

ответ

2

Использование 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

+0

Я попытался преобразовать: scale (1.1) в мой отредактированный CSS (см. Выше) и для классов .attachment-post-thumnbail, .size-post-thumbnail, .wp-post -image: hover (который в настоящее время прокомментирован в отредактированном CSS), но в обоих случаях ничего не произошло. – HappyHands31

+0

Я вижу «недопустимое значение свойства» для «transform: scale (1.1)» в инспекторе http://imgur.com/4mZWmWH – HappyHands31

+2

@ HappyHands31 Обновлен мой ответ с примером, показывающим, что он работает, а если нет, вы что-то пропустили. – LGSon