CSS를 사용하여 호버에서 흐린 이미지의 부드러운 전환을 달성하는 방법은 무엇입니까?

흐릿한 이미지에 대한 CSS 전환 완화

CSS :hover 의사 클래스를 사용하여 이미지 위로 마우스를 가져갈 때 다음을 사용하여 흐림 필터를 적용합니다. 필터 속성은 시각적으로 매력적인 효과를 만듭니다. 그러나 마우스를 제거하면 이미지가 갑자기 정상 상태로 되돌아가는 것이 일반적으로 관찰됩니다. 이 동작은 전환 단계에서 "ease-out" 효과가 없기 때문에 발생할 수 있습니다.

이 문제를 해결하고 양방향으로 원활한 전환을 보장하려면 전환 속성을 :hover 의사 클래스에만 적용되는 것이 아니라 실제 요소입니다. 이렇게 하면 요소 위에 마우스를 올리거나 끌 때 원활하게 전환이 발생할 수 있습니다.

예:

다음 코드 조각을 고려하세요.

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  filter: blur(4px);
}</code>

이 업데이트된 예는 :hover 의사 클래스 대신 .img-blur 클래스에 전환 속성을 적용하면 양방향으로 작동하는 전환이 어떻게 생성되는지 보여줍니다.

추가 개선 사항:

또 다른 일반적인 요구 사항은 마우스를 흐린 이미지 위로 가져갈 때 해당 이미지에 텍스트를 오버레이하는 것입니다. 이는 JavaScript를 사용하여 달성할 수 있지만 CSS 메서드는 보다 효율적이고 가벼운 솔루션을 제공합니다. 방법은 다음과 같습니다.

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
  position: relative;
}
.img-blur:hover {
  filter: blur(4px);
  position: absolute;
  z-index: 1;
}
.img-blur:hover .text-overlay {
  display: block;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
  display: none;
}</code>

이 코드는 기본적으로 숨겨져 있는 .text-overlay 요소를 도입합니다. 이미지 위로 마우스를 가져가면 :hover 의사 클래스가 활성화되어 오버레이가 표시되고 흐린 이미지 위에 정렬됩니다. 이 접근 방식을 사용하면 텍스트 오버레이 스타일을 더 효과적으로 제어할 수 있습니다.

위 내용은 CSS를 사용하여 호버에서 흐린 이미지의 부드러운 전환을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!