CSS3 변환만 사용하여 호버에 이미지 확대/축소 효과를 만들려면 어떻게 해야 합니까?

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

CSS3의 변환 속성을 사용하면 이미지를 확대하는 호버 효과를 쉽게 만들 수 있습니다. . 이 접근 방식에는 최소한의 코드가 필요하며 복잡한 테이블이나 마스크 div가 필요 없이 매끄러운 시각적 향상을 제공합니다.

구현

확대/축소 효과를 만들려면 다음 단계를 따르세요.

1. HTML: 이미지를 컨테이너 안에 넣습니다. 요소.

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Your image">
    </div>
</div>

2. CSS: CSS 스타일을 적용하여 이미지 확대/축소를 제어합니다.

.thumbnail {
    width: 320px;
    height: 240px;
}

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

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

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

• 전환 속성은 크기 조절 효과의 지속 시간과 여유 기능을 정의합니다.
• 변환: scale() 속성은 커서가 컨테이너 위에 있을 때 이미지의 크기를 조정합니다.

예

다음 예제 바이올린을 참조하세요. https://jsfiddle.net/rkd3x4uc/

참고:

• 이미지에 확대/축소를 직접 적용하는 Zoom 속성은 인터넷에서만 지원됩니다. 탐침. 브라우저 간 호환성을 위해서는 변환: scale() 속성이 선호됩니다.
• 크기가 조정된 이미지를 컨테이너 경계 내로 제한하려면 .image 클래스에 Overflow: Hidden을 추가할 수 있습니다.

위 내용은 CSS3 변환만 사용하여 호버에 이미지 확대/축소 효과를 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!