테이블이나 마스크 없이 호버에 CSS 확대/축소 효과를 만드는 방법은 무엇입니까?

변환을 사용하여 호버에 대한 CSS 확대/축소 효과

질문:

마우스 호버에 대한 확대/축소 효과를 만들려면 어떻게 해야 합니까? 테이블이나 마스크를 사용하지 않은 HTML 이미지 divs?

답변:

배율과 함께 변형 속성 사용

확대/축소를 달성하려면 CSS3의 변형 속성을 활용하는 것이 좋습니다. 스케일을 사용한 효과와 같습니다. 방법은 다음과 같습니다.

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy" alt="Image hover effect">
    </div>
</div>

CSS:

.thumbnail {
    width: desired-width;
    height: desired-height;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);  
}

데모 설명:

• scale() 값은 이미지의 원래 크기에 대한 승수를 나타내며 결과적으로 25% 확대/축소 효과가 발생합니다.
• 전환 속성은 확대/축소 효과의 부드러운 전환을 지정합니다.
• 이 접근 방식에서는 추가 사용을 피합니다. 요소 또는 CSS 트릭을 사용하여 원하는 확대/축소 효과를 얻을 수 있는 간단하고 효율적인 방법입니다.

위 내용은 테이블이나 마스크 없이 호버에 CSS 확대/축소 효과를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!