CSS를 이용하여 위로 떠오르는 제품 커버 이미지를 구현하는 방법에 대한 자세한 설명

이 글에서는 CSS를 이용하여 터치 시 위로 떠오르는 제품 커버 이미지를 구현하는 방법을 설명하고 있습니다. CSS를 이용하여 터치 시 위로 떠오르는 제품 커버 이미지를 구현하는 방법을 모른다면 이 글을 함께 살펴보세요! , 오늘 CSS를 작성할 때 다음을 구현해야 합니다. 사진과 소개로 구성된

하이퍼링크

위에 마우스를 올리면 두리안이 위로 떠오릅니다.

이 효과를 얻으려면 내 아이디어가 다음 단계로 나누어집니다.

아래 요소

절대 위치 지정

전환 시간 증가
• 1. 마우스 호버 - 의사

  클래스 선택기 추가 : 호버

  요소 스타일을 변경하기 위해 마우스를 호버할 때 가장 먼저 떠오르는 것은 마음은 의사 클래스 선택기:호버를 사용하는 것입니다. 이 글을 쓰는 동안 제가 겪고 있는 문제는 하이퍼링크 위로 마우스를 가져가면 이미지 부분만 움직이고 텍스트 소개 부분은 움직이지 않는다는 것입니다. 따라서 의사 클래스 작성 시에는 #id a:hover라고 쓸 수 없고 그림 부분 p의 클래스 선택자, 즉 #id a:hover .class {}가 뒤에 따라와야 합니다. 이렇게 하면 하이퍼링크 위에 마우스를 올려 놓고 이미지만 이동할 수 있습니다.

• 2. 이미지 이동 - 요소의 여백/패딩 변경

  이미지를 움직이게 하려면 마우스를 올리면 이미지 위치가 위로 이동하도록 이미지의 위치를 ​​변경한 다음 여백을 변경할 수 있습니다. 또는 이동 목적을 달성하기 위한 요소의 패딩 속성

3. 하위 요소의 절대 위치 지정 흐름의 영향으로 그림 위치의 이동은 아래 텍스트 소개 및 가격의 위치에 영향을 미칩니다. 즉, 전반적인 움직임은 위쪽으로 향하게 됩니다. 제자리에 유지하려면 해당 위치를 더 이상 세부 정보가 없는 절대 위치로 변경해야 합니다. 4. 전환 시간을 늘리세요-transition

　전환을 덜 무뚝뚝하게 만들려면 전환 속성을 높여야 합니다. 그러나 :hover에 전환 속성을 추가하는 것은 권장되지 않습니다. 마우스가 멀어지면 전환 속성이 ​​사라져 마우스가 멀어질 때 너무 뻣뻣해지기 때문입니다. 위의 .class와 같이 이동해야 하는 요소에 전환 속성을 직접 추가하기만 하면 됩니다.

관련 추천:

CSS 플로팅 요소의 센터링에 대하여

페이지 이미지 좌우 슬라이딩 효과의 간단한 구현 사례

위 내용은 CSS를 이용하여 위로 떠오르는 제품 커버 이미지를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!