リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいという時に使えそうなエフェクトのサンプルです。
Shine
Sample↓
ホバー時にキランと光が左から右へ流れていくようなエフェクトを付けたものです。
実装するにはHTMLでimageをfigureで囲みます。
CSSは下記のように記述します。
【HTML】
|
1 2 3 |
<figure> <img src="image.jpg" /> </figure> |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
figure { width: 800px; height: 300px; margin: 0; padding: 0; background: #fff; overflow: hidden; position: relative; } figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } figure:hover::before { -webkit-animation: shine .75s; animation: shine .75s; } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } |