이미지 호버에서 CSS 전환에 대한 부드러운 Ease-Out 효과를 얻는 방법은 무엇입니까?

CSS 전환 문제: Ease-In은 가능하지만 Ease-Out은 아님

이 질문은 이미지에 대한 CSS 전환 구현에 관한 것입니다. 이미지 위에 마우스를 올리면 이미지가 부드럽게 흐려지지만, 마우스를 떼면 갑자기 원래 상태로 돌아갑니다. 원하는 동작은 이미지의 흐림 효과를 완화하는 것입니다. 또한 질문에서는 CSS만 사용하여 마우스 오버 시 텍스트를 표시할 수 있는 가능성을 탐구합니다.

Ease-Out 솔루션

원하는 Ease-Out 효과를 얻으려면 :hover 의사 클래스가 아닌 요소 자체에 CSS 전환 설정을 적용합니다. 이렇게 하면 마우스를 올리거나 끌 때 모두 전환이 발생합니다.

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}</code>

마우스 위에 텍스트 추가

CSS만 사용하여 이미지 위로 마우스를 가져갈 때 텍스트를 표시하려면 , :after 의사 요소를 활용하세요:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:after {
  content: "Learn More";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding: 10px;
  border: 1px solid black;
  border-radius: 5px;
}
.img-blur:hover:after {
  display: block;
}</code>

이러한 조정을 따르면 마우스 커서가 떠날 때 이미지의 흐림 효과가 완화되고 마우스를 올리면 텍스트가 표시됩니다.

위 내용은 이미지 호버에서 CSS 전환에 대한 부드러운 Ease-Out 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!