.lineUp .sliderContainer > a {overflow: hidden; display: block; width: 250px; margin-right: 15px;}
.lineUp .sliderContainer > a img {width: 100%;}
.lineUp .sliderContainer > a img:hover {transition: .5s; transform: scale(1.03);}
.lineUp .sliderContainer > a img:not(:hover) {transition: .5s; transform: scale(1);}
보통 :hover를 통해 색깔변경을 많이 해주는데
transform으로 이미지 확대나 변형 한 뒤 다시 부드럽게 돌아가게 하기 위해 간단하게 :not(:hover)를 이용할 수 있다.
참고자료
반응형
SMALL
'MarkUp > CSS' 카테고리의 다른 글
[CSS] pointer-event 알아보기 ing (0) | 2022.02.23 |
---|---|
[CSS] form input[file, radio] 커스텀하기 (0) | 2022.02.16 |
[CSS] 폰트어썸을 사용한 입력필드 만들어보기 (0) | 2022.01.08 |
[CSS] CSS 변수 사용하기 (0) | 2022.01.05 |
[CSS] image-Map 이미지맵 만들기 (0) | 2022.01.05 |