아래는 썸네일에 마우스를 가져가면 변하는 것이다. 소스를 보면 부트스트랩 버전 4.1.1지만 이 글에 있는 3개는 아무 문제없이 작동한다. 소스에서 21개 있는데, 3까지 고려한다면 고작 3개만 완벽하다는 것이 너무 아쉽다. 참고로 이 블로그는 부트스트랩 버전 3으로 만들었다.
Hover Effect Style : Demo - 1
Hover Effect Style : Demo - 2
Hover Effect Style : Demo - 5
- 소스 다운로드 및 예제 보기 : https://bootsnipp.com/snippets/92e5X
위 소스에 부트스트랩 4에서 사용하는 mt가 나오니 걱정할 수 있다. 4에서 mt는 위쪽 여백을 나타내는 것으로 mt는 부트스트랩3에서는 지원하지 않는다. 그러니 부트스트랩3에서 소스에 나온 21개 예를 모두 사용하고자 한다면 4에 대한 소스를 3에 맞게 수정해야 할 것이다.
수치는 px 등이 아닌 rem이다. 예로 mt-40 이면 위쪽으로 여백이 40rem이 된다. 소스를 퍼올 수 있는 페이지에 위에서 적었듯 21개의 많은 예제가 있는데, 부트스트랩3에서 mt를 무시하니 제대로 나오지 않는 경우가 많았다. 위 3개는 제대로 나오는 경우다. 그렇지만 아래 썸네일에 마우스를 올려보면 원안에 아이콘에 원 중앙에 가지 않았다.
Hover Effect Style : Demo - 8
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 부트스트랩3를 사용한 탭 (0) | 2020.03.13 |
|---|---|
| 부트스트랩3,슬라이드 표시 원 크게 (0) | 2020.02.21 |
| 부트스트랩 버전 3,4,5 소식 (0) | 2019.11.12 |
| 부트스트랩 버전3과 4에서 가능한 hover, 두번째 (0) | 2019.10.27 |
| 부트스트랩 테마는 무료보다 유료 (0) | 2019.07.29 |
| 부트스트랩 collapse (0) | 2019.06.27 |
| 부트스트랩4에서 테두리 만들기 (0) | 2019.06.25 |
| 부트스트랩4에서 그림자 만들기 (0) | 2019.05.31 |
