다양한 마우스 오버 효과가 있는 사이트 Hover.css

http://ianlunn.github.io/Hover/

이미지에 마우스 오버 효과를 적용하기 위해 구글링을 하다가 괜찮은 사이트를 찾았다. 위 링크를 클릭하면 사이트로 이동한다.

Border Fade

Outline Out

Outline In

Reveal

Underline Reveal

사이트에 정말 다양하고 많은 효과들이 있지만 이미지에 적용할만한 효과는 Border Transitions 탭에서 찾을 수 있었다. 그중에서 마음에 드는 효과 다섯 가지를 모아봤는데, 현재 Reveal 효과를 섬네일에 적용한 상태다.

티스토리 블로그에 적용하는 방법

Border Fade 효과를 사용한다고 가정한다.

https://github.com/IanLunn/Hover/#downloadinstall

위 링크를 클릭해서 사이트로 이동한 다음 Download Zip 링크를 클릭해 파일을 다운로드 후 압축을 푼다.

다양한 효과를 사용하려는 경우

1. Hover-master 폴더 > css 폴더 > hover-min.css 파일을 티스토리 스킨 편집에 업로드한다.

<link rel="stylesheet" href="./images/hover-min.css">
</head>

2. 파일을 업로드하고 나서 위 소스를 </head> 태그 위에 추가하고 적용을 원하는 부분에 .hvr-border-fade 클래스를 추가한다.

하나 또는 몇 개의 효과만 사용하려는 경우

1. Hover-master 폴더 > css 폴더 > hover.css 파일을 메모장으로 연 다음 Ctrl + F를 이용해서 Border Fade를 검색한다. 효과 이름은 /* */와 같은 주석으로 표시되어 있기 때문에 찾기가 쉽다.

/* Border Fade */
.hvr-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hvr-border-fade:hover, .hvr-border-fade:focus, .hvr-border-fade:active {
  box-shadow: inset 0 0 0 4px #2098D1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

2. 위와 같은 소스를 복사한 다음 블로그 관리 > 스킨 편집 > CSS 탭에 붙여 넣는다.

3. 적용을 원하는 부분에 .hvr-border-fade 클래스를 추가한다.

꼭 클래스명이 .hvr-border-fade 가 아니더라도 상관은 없고 자신이 원하는 클래스명으로 바꿀 수 있다. 단, :hover, :focus 등과 같은 부분은 지우면 안 된다. 이 외에도 테두리 색, 테두리 굵기, 전환 지속 시간 등 자신의 입맛에 맞게 추가로 수정해서 사용할 수도 있다.