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

👉🏻 호버링방법

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

.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가 적당합니다

Made with SlashPage