다양한 호버 효과들

참고 _ https://codepen.io/nxworld/pen/ZYNOBZ

Html 구조

<a href="#none">          <img src="#이미지주소"/>     </a>

[ CSS ]

1.  Zoom In

기본 

a img { transform: scale(1); transition: .3s ease-in-out;     }

hover시

a:hover img { -webkit-transform: scale(1.3); transform: scale(1.3);   }

- transform: scale(값) 을 통해 zoom 효과 부여

2.  Zoom In 2 

기본 

a img { width: 350px; //width값을 지정 height: auto; transition: .3s ease-in-out;    }

hover시

a:hover img { width: 450px;   }

- width값 크기 변경을 통해 zoom 효과 부여

3.  Zoom Out

기본 

a img { transform: scale(1.5);  transition: .3s ease-in-out;    }

hover시

a:hover img { transform: scale(1);   }

4.  Slide

기본 

a img { margin-left: 30px; transform: scale(1.5); transition: .3s ease-in-out;     }

hover시

a:hover img { margin-left: 0;   }

- margin-left로 위치값 조절해서 hover효과 부여

5.  Grayscale

기본 

a img { filter: grayscale(100%); transition: .3s ease-in-out; }

hover시

a:hover img { filter: grayscale(0);   }

- filter grayscle값을 조절하여 hover효과 부여(IE 사용 불가...ㅡㅡ)

다양한 css filter 효과를 사용해볼수 있는 곳

http://html5-demos.appspot.com/static/css/filters/index.html

7.  Overlay

기본 

a {background: #222;} //배경값      a img { opacity: 1; transition: .3s ease-in-out;    }

hover시

a:hover img { opacity: .2;   }

8.  Shine 효과(with animation)

기본 

a {position: relative;}      a:before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); transform: skewX(-25deg);    }

hover시

a:hover::before { animation: shine .75s; } @keyframes shine { 100% { left: 125%; } }

8.  Circle 효과(with animation)

기본 

a {position: relative;}      a:before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(0,0,0,.2); border-radius: 100%; transform: translate(-50%, -50%); opacity: 0;    }

hover시

a:hover::before { animation: circle .75s; } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } }

정리 )

https://jsfiddle.net/jywoo/oj5wcqtz/26/