| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- Array
- Java
- string
- 인텔리제이
- 이탈리아
- windows
- Files
- list
- Button
- Visual Studio Code
- html
- json
- 문자열
- vscode
- 자바
- 배열
- IntelliJ
- table
- ArrayList
- CSS
- 이클립스
- Maven
- Eclipse
- 자바스크립트
- js
- CMD
- javascript
- 테이블
- date
- input
- Today
- Total
어제 오늘 내일
[HTML/CSS] 마우스 오버시 이미지 어둡게 하기 (천천히) 본문
- 마우스 오버 시, 이미지 어둡게 하기 - :hover
- 마우스 오버 시, 이미지 어둡게 하기 (천천히) - 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 |
