HappyHands31 HappyHands31 - 1 month ago 11
CSS Question

CSS - Need Only Image Size (Not Text) To Increase On Hover

Link to Website

If you visit the services section of the front page (with the Website Design, Graphic Design, Search Engine Marketing, and WordPress Conversion icons) you'll notice that the images and the text below them will increase in size when you hover over them. But I just want for the image size to increase (not the text). The CSS that currently defines the service area size (without and with hover) is:

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


The "service-icon" class should only apply to the icon, so then why is the text also responding?

I also tried to apply this style to the specific to the image class:

/*.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;
}


But it gave me no result - the images / font size didn't increase at all. At this point, I don't know what else to try. This is a WordPress website with a custom theme, and you'll notice that the images are initially animated with the CSS3 Animate-It Plugin. Thanks for your suggestions.

EDIT: Updated 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;
}
*/

Answer

Use transform: scale()

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

Sample snippet

img:hover {
  transform: scale(1.1);
}
<img src="http://placehold.it/200x100/f00" alt="image">
<br>
Hey there, I'm not moving