# 1-6. 분할사진 호버링 방법

## 👉🏻  호버링방법

> 호버링은 [1-5.분할사진 코드수정 방법](https://slashpage.com/amaewo/7916x82rd97e724kpyg3)에 사진만 바꾸면 **자동으로 적용**됩니다
> 그래서 별도로 안건드려도 됩니다 
> 📌 단 호버링시 **명도**나 **변환속도**는 아래 CSS로 수정할수 있어요 (이미 적용되어 있음)

```javascript
.image-container img {filter: brightness(50%)}
.image-container img:hover {transform: scale(1.2, 1.2); transition-duration: 0.5s;filter: brightness(100%);}
.image-container img {transition-duration: 0.3s;}
```

> **CSS 설명**
> - line 1) 기본 이미지의 명도에요 brightness 에 **10~100%** 사이의 숫자를 수정하면 조절이 됩니다 
> - line 2) hover시 이미지 확대사이즈와 전환속도,명도에요
> - line 2) **scale(1.2, 1.2)** 는 확대되는 이미지에요. **1.1~1.3** 까지의 숫자로 넣어주면 적당합니다
> - line 2) **transition-duration: 0.5s** 는 전환속도에요.** 0.5~1** 까지의 숫자로 넣어주면 적당합니다
> - line 2) **brightness(100%)** 는 이미지 밝기에요. hover가 된 이후의 이미지니 **100%**가 좋겠죠?
> - line 3) **transition-duration: 0.3s** 호버를 벗어나 이미지가 원상복구될때 수행되는 속도에요 **0.3~0.5**가 적당합니다

For the site tree, see the [root Markdown](https://slashpage.com/amaewo.md).