어제 오늘 내일

[HTML/CSS] 마우스 오버시 이미지 어둡게 하기 (천천히) 본문

IT/HTML&CSS

[HTML/CSS] 마우스 오버시 이미지 어둡게 하기 (천천히)

hi.anna 2022. 7. 31. 06:33

 

  1. 마우스 오버 시, 이미지 어둡게 하기 - :hover
  2. 마우스 오버 시, 이미지 어둡게 하기 (천천히) - transition

 

 

1. 마우스 오버 시, 이미지 어둡게 하기 - :hover

:hover

가상 클래스인 :hover는 

보통 마우스 포인터가 요소 위에 올라가면 선택됩니다.

 

filter: brightness()

filter 속성에 적용되는 brightness()  함수는

대상 요소의 밝기를 조정합니다.

brightness(1)은 원본 밝기이고,

숫자가 작아질수록 어둡고, 클수록 밝습니다.

자세한 설명은 지난 포스팅을 참조하세요.

[HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient)

 

  예제  

my_mouseover.html

<!DOCTYPE html>
<html>

<head>
    <title>이미지</title>
    <link rel="stylesheet" href="css/my_mouseover.css" />
</head>

<body>
    <img src="./img/puppy.jpg" class="my_img">
</body>

</html>

 

my_mouseover.css

.my_img {
    filter: brightness(1);
}

.my_img:hover {
    filter: brightness(0.5);
}

 

결과

 

.my_img:hover {

   filter: brightness(0.5);

}

이미지가 있는 my_img 영역에 마우스 포인터가 올라가면

brightness를 0.5로 적용하여 이미지가 어두워지도록 하였습니다.

 

 

 

2. 마우스 오버 시, 이미지 어둡게 하기 (천천히) - transiton

transiton

transition을 사용하면 CSS 속성이 변경되는 속도를 제어할 수 있습니다.

 

transition은 구체적으로 다음 항목들을 정의할 수 있습니다.

  • 애니메이션을 적용할 속성
  • 애니메이션 시작 시간
  • 애니메이션 지속 시간
  • 애니메이션 방법

여기서는 위 항목들을 모두 사용하지 않고,

애니메이션 지속 시간을 설정하여,

이미지에 마우스 포인터가 올라갔을 때,

천천히 이미지가 어두워지도록 설정해 보도록 하겠습니다.

 

  예제  

my_mouseover.html

<!DOCTYPE html>
<html>

<head>
    <title>이미지</title>
    <link rel="stylesheet" href="css/my_mouseover.css" />
</head>

<body>
    <img src="./img/puppy.jpg" class="my_img">
</body>

</html>

 

my_mouseover.css

.my_img {
    filter: brightness(1);
    transition: 5s;
}

.my_img:hover {
    filter: brightness(0.5);
}

 

결과

위 예제는 이미지 위에 마우스 포인터가 올라가면

5초 동안 천천히 이미지가 어두워집니다.

 

transition: 5s;

transition 속성을 정의하면

:hover나 :active 등의 가상 클래스에 정의한 상태로

요소의 속성이 변경되는 시간, 방법 등을 정의할 수 있습니다.

여기서는 애니메이션이 변경되는 시간을 5초로 설정하여,

이미지가 천천히 어두워지고, 천천히 밝아지도록 하였습니다.

 

 

 

반응형

'IT > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 이미지 흑백으로 변환하기 - grayscale()  (0) 2022.08.02
[HTML/CSS] 텍스트에 마우스 오버시 이미지 보이기  (0) 2022.08.01
[HTML/CSS] 이미지 어둡게 하는 3가지 방법 (brightness, background-color, linear-gradient)  (0) 2022.07.30
[HTML/CSS] 이미지 투명도 지정하기 (opacity)  (0) 2022.07.29
[HTML/CSS] 대소문자 변환, 첫글자만 대문자로 바꾸기 (text-transform)  (0) 2022.07.27
공유하기 링크
'IT/HTML&CSS' Related Articles more
Comments