마우스 오버 시 영웅의 배경 이미지를 변경하는 방법(CSS 사용)

Elementor 는 웹 디자이너가 직관적인 시각적 빌더를 사용하여 전문적이고 픽셀이 완벽한 웹 사이트를 만들 수 있게 해주는 최고의 WordPress 웹 사이트 구축 도구입니다. Elementor에는 방문자가 페이지에 방문할 때 가장 먼저 보게 되는 히어로 섹션을 포함하여 웹사이트의 모든 부분이나 열의 배경 그림을 변경할 수 있는 옵션이 포함되어 있습니다.

히어로 이미지란?

히어로 이미지는 웹페이지 헤더 섹션(일반적으로 페이지 상단 근처)에 고정된 거대한 웹 배너 이미지입니다. 일반적으로 회사의 주요 메시지를 표현하기 위해 이미지와 텍스트가 모두 포함됩니다. 스크롤 없이 볼 수 있는 부분 위의 히어로 사진에는 방문자가 페이지의 나머지 부분을 탐색하도록 유도하는 클릭 유도 문구(CTA)가 포함되는 경우가 많습니다. 이 그래픽의 목적은 페이지에 에너지와 흥미를 주는 동시에 좋은 첫인상을 주기 위한 것입니다.

호버에서 영웅 배경 이미지를 변경하는 방법

이 블로그 게시물에서는 Elementor의 동적 태그와 사용자 정의 CSS를 사용하여 마우스를 올리면 영웅의 배경 그림을 변경하는 방법을 보여 드리겠습니다. 이는 방문자의 관심을 끌고 웹사이트를 돋보이게 하는 엄청난 효과를 가져올 것입니다.

1단계: 새 페이지 만들기

가장 먼저 해야 할 일은 새 페이지를 만들고 Elementor 로 편집하는 것입니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

다음 설정으로 섹션을 삽입합니다.

최소 높이: 100vh
폭: 100%

"image-hover"라는 섹션에 클래스를 설정합니다.

미디어 라이브러리에 호버 효과에 사용할 이미지를 업로드하세요.

완료되면 다음 CSS 코드를 삽입하세요.

.image-hover [class*="slide"]:hover {
    background-color: #CE3A3AA1 !important;
}
.image-hover:has(.slide1:hover) {
    background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/gallery-2.jpg) !important;
}


.image-hover:has(.slide2:hover) {
    background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/gallery-1.jpg) !important;
}


.image-hover:has(.slide3:hover) {
    background-image: url(https://test.positivevibesmedia.com/wp-content/uploads/2021/05/cta-img.jpg) !important;
}

참고: 배경 이미지 URL을 미디어 라이브러리의 이미지 URL로 바꾸세요.

이 CSS는 두 가지 목표를 달성합니다.

1 - 마우스를 올리면 각 컨테이너의 배경색을 변경합니다.

2 - .slide-* 컨테이너 위로 마우스를 가져가면 .image-hover의 배경 이미지가 변경됩니다.