CSS를 사용하여 호버에 이미지 확대/축소 효과를 만드는 방법은 무엇입니까?

CSS를 사용하여 마우스 오버 시 이미지 확대 효과

웹 개발에서는 마우스 오버 시 이미지에 확대/축소 효과를 적용하는 것이 일반적인 디자인 요소입니다. CSS3 변환을 사용하여 솔루션을 살펴보겠습니다.

확대/축소 효과를 위한 CSS3 변환

CSS3 변환 속성과 scale() 함수를 사용하면 이미지에 확대/축소 효과를 적용할 수 있습니다. 다음은 코드 조각입니다.

HTML:

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

CSS:

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

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

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

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

이 예에서 image div에는 이미지가 포함되어 있습니다. 이미지를 가리키면 scale() 함수를 사용하여 이미지가 1.25배로 확대됩니다. 전환 속성은 부드러운 확대/축소 애니메이션을 보장합니다.

추가 참고 사항

• 배율 값을 조정하여 원하는 확대/축소 수준을 얻을 수 있습니다.
• CSS 오버플로: 숨겨진 캔 크기가 조정된 이미지에서 오버플로된 부분을 숨기려면 이미지 div에 적용하세요.
• 확대/축소 속성은 IE에서는 지원되지만 다른 IE에서는 지원되지 않습니다. 브라우저.

데모

실시간 데모는 다음과 같습니다.

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="https://placeimg.com/320/240/nature" class="lazy" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

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

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

    .image:hover img {
        transform: scale(1.25);
    }
</style>

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