Share
Sign In

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

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