CSS - 당신은 (웹 사이트 디자인, 그래픽 디자인, 검색 엔진 마케팅, 워드 프레스 변환 아이콘) 앞 페이지의 서비스 섹션을 방문하는 경우 필요 만 이미지 크기 (안 텍스트) 호버

Question

Link to Website

에 높이려면 마우스를 가져 가면 이미지와 텍스트 아래에 크기가 커짐을 알 수 있습니다. 하지만 이미지 크기가 증가하기만을 원합니다 (텍스트가 아님). 현재 (호버없이 사용) 서비스 영역의 크기를 정의하는 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을 사용하여 이미지가 처음에 애니메이션 처리됩니다. 귀하의 제안에 감사드립니다.

편집 : 업데이트 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 1

사용 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