다양한 CSS 마우스 오버 효과 소스코드
남들과 다른 블로그 스타일! 마우스 오버 효과(hover/transition)만으로도 내 블로그의 느낌을 남들과 다르게 만들수 있습니다. 그래서 이번에는 마우스를 오버했을 때 다양한 효과를 보여주는 CSS의 소스 코드를 작성 해보도록 하겠습니다.
마우스 오버 효과는 쇼핑몰의 상품정보 또는 이미지 갤러리 등에서 많이 사용되는 효과인데요, 마우스를 이미지에 올리면 제목, 상세내용 또는 버튼 등을 보여주는 기능입니다. 그냥 보여주면 심심하니 남들과 조금 다른 독특한 효과를 넣어보세요.
1. CSS 마우스 오버 효과 1
- Demo
- 소스 코드
See the Pen CSS Hover Effect For Captions 1 by hagisuda (@hagisuda) on CodePen.
2. CSS 마우스 오버 효과 2
- Demo
- 소스 코드
See the Pen eYJQdNY by hagisuda (@hagisuda) on CodePen.
3. CSS 마우스 오버 효과 3
- Demo
- 소스 코드
See the Pen CSS Hover Effect For Captions 3 by hagisuda (@hagisuda) on CodePen.
4. CSS 마우스 오버 효과 4
- Demo
- 소스 코드
See the Pen CSS Hover Effect For Captions 4 by hagisuda (@hagisuda) on CodePen.
5. CSS 마우스 오버 효과 5
- Demo
- 소스 코드
See the Pen CSS Hover Effect For Captions 5 by hagisuda (@hagisuda) on CodePen.
6. CSS 마우스 오버 효과 6
- Demo
- 소스 코드
See the Pen CSS Hover Effect For Captions 6 by hagisuda (@hagisuda) on CodePen.
7. CSS 마우스 오버 효과 7
- Demo
- 소스 코드
See the Pen CSS Hover Effect For Captions 7 by hagisuda (@hagisuda) on CodePen.
지금까지 다양한 CSS 마우스 오버 효과를 알아보았는데, 어떤 효과가 제일 마음에 드시나요. 배경 또는 글자 색 등은 본인의 블로그에 맞는 색깔로 변경하시면 더 좋을 것 같습니다. 멋진 블로그 만드세요^^.
흥미로운 다른글들
이 글을 공유합시다
