728x90
반응형
이미지를 좀 더 효과적으로 보여줄 수 있는 hover 애니메이션을 css animation 을 통해 구현하였다.
이미지에 호버햇을 때 그라데이션으로 하얀 배경을 깔아 이미지에 대한 설명을 보여주거나
흑백블러 처리를 한 이미지에서 마우스를 올렸을때 원래의 이미지를 보여주거나
등등
마우스를 올렸을때 해당 글을 내용을 보여주는 다양한 효과들을 구현하였다
이미지 숨기고 hover하면 보여주기
[CSS/CSS 응용] - 이미지 hover 할때 다른 이미지로 교체
728x90
반응형
'CSS > CSS 기초' 카테고리의 다른 글
[CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지) (382) | 2019.04.18 |
---|---|
[CSS3] 영역 크기의 따라 글자가 다음줄로 넘어갈때 써야하는 word-break (258) | 2019.04.18 |
[@keyframes/CSS3] animation ease linear steps 값의 차이 (408) | 2019.04.17 |
[CSS3] 단나누기 column (407) | 2019.04.10 |
[CSS3] 정렬을 하는 여러가지 방법 (403) | 2019.04.09 |
댓글