JQuery : 마우스 오버시 텍스트 확대

애니메이션으로 텍스트 확대/축소를 원합니다. 문제는 텍스트가 상대 div 안에 절대적으로 배치되어 있고 font-size에 애니메이션을 적용하면 텍스트가 오른쪽과 아래로 만 확장된다는 것입니다. 나는 그것이 모든면에 똑같이 확장/철회되기를 원한다.JQuery : 마우스 오버시 텍스트 확대

준비 예 : http://jsbin.com/welcome/48103/edit

출처

2012-11-13 Eike Cochu

텍스트 상대적 위치를 유지해야합니까? – Luke

크기 조정과 함께 상단 : 및 좌측 :에 애니메이션을 적용해야합니다. –

애니메이션이 필요합니까? coz 그렇지 않으면 그냥 평범한 CSS를 사용하여 글꼴 크기를 늘리거나 내놓을 수 있습니다 –

DEMO

<a class="zoom" href='#' style='font-size:12px;top:50px;left:50px'>Hover me!</a>

.zoom { 
    -webkit-transition: all .2s ease-in-out; 
      transition: all .2s ease-in-out; 
} 
.zoom:hover { 
    -webkit-transform: scale(1.4); 
      transform: scale(1.4); 
}

출처

2012-11-13 16:29:09

수평 중심에 정렬이 용이하다. text-align: center을 추가하면 제대로 작동합니다. 그러나 중간에 정렬하려면 display: table을 사용해야합니다. "유일한"td가 "허용"되어 vertical-align: middle으로 설정해야하기 때문입니다. 그래서 당신은 주위 사업부 테이블 레이아웃을 구축해야 : http://jsbin.com/welcome/48145/edit

출처

2012-11-13 16:12:45 Varon

당신의 솔루션도 맞습니다. 그러나 나는 순수 CSS 솔루션을 사용할 수 있는지 몰랐습니다. 고맙습니다 –

JQuery : 마우스 오버시 텍스트 확대

답변

관련 문제