>웹 프론트엔드 >CSS 튜토리얼 >2020-05-28 - CSS를 사용하여 마우스 오버 시 이미지 크기를 조정하는 방법은 무엇입니까?

2020-05-28 - CSS를 사용하여 마우스 오버 시 이미지 크기를 조정하는 방법은 무엇입니까?

A 枕上人如玉、
A 枕上人如玉、원래의
2020-05-28 18:42:43335검색

이미지 확대 효과는 마우스를 올리거나 클릭하면 이미지가 확대되는 응용 효과입니다. 이 효과는 주로 웹사이트에서 사용됩니다. 이 효과는 이미지에 사용자 세부 정보를 표시하려는 상황에서 유용합니다.
마우스 오버 효과를 만드는 방법에는 두 가지가 있습니다.

JavaScript 사용

CSS 사용

이 문서에서는 CSS를 사용하여 이 효과를 얻는 방법을 살펴보겠습니다. 이 문서에는 두 부분의 코드가 포함되어 있습니다. 첫 번째 부분에는 HTML 코드가 포함되고 두 번째 부분에는 CSS 코드가 포함됩니다. HTML 코드: 이 기사에서는 HTML을 사용하여 호버 효과에 대한 이미지 크기 조정의 기본 구조를 만듭니다.

CSS를 사용하여 마우스 오버 시 이미지를 확대/축소하는 방법은 무엇입니까?

Geeks Image


CSS 코드: 이 섹션에서는, 마우스 오버 시 이미지 크기를 조정하기 위해 일부 CSS 속성을 사용할 것입니다. 스케일링 효과를 생성하기 위해 전환 및 변환 두 가지 속성을 사용합니다.