今日は、メアリー・ルーのホバー効果の素晴らしい例を紹介します。 多くの人が、メニューにホバー効果のある彼女の例を気に入っており、今回は、丸い要素の等しく素晴らしい例で私たちを喜ばせることにしました。 border-radiusプロパティを使用できるようになったので、円形の図形を作成でき、Webサイト上のデザイン要素としてますます表示されています。 私が最も気に入っているユースケースの1つは、通常の長方形のサムネイルよりもはるかに興味深い丸いサムネイルです。 そして今、私たちはそのような要素の上にホバリングするとき、いくつかの異常な効果を作成しようとしています！
注：このレッスンの結果は、適切なCSSプロパティをサポートするブラウザーでのみ意図したとおりに機能します。
この記事のコード例では、ブラウザのプレフィックスを省略しますが、もちろんソースファイルでそれらを見つけることができます。
それでは始めましょう！
HTML
ほとんどの例では、次の構造を使用します。
<ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>Use what you have</h3> <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-2"> <div class="ch-info"> <h3>Common Causes of Stains</h3> <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p> </div> </div> </li> <li> <div class="ch-item ch-img-3"> <div class="ch-info"> <h3>Pink Lightning</h3> <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p> </div> </div> </li> </ul>
ここでは画像を使用できますが、もう少し自由を与え、写真の代わりに背景画像を使用します。 「ch-img-」で始まるクラスでそれらを定義します。 さらに、個々の要素の説明とその名前を含むブロックがあります。
では、ホバー効果を作成しましょう！
CSS
リストとリストアイテムに共通のスタイルを定義しましょう。
.ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin: 20px; }
display：inline-blockを使用してtext-alignプロパティを定義すると、リストアイテムを中央に配置できます。
ニコラス・ギャラガーclearfixハック ： nicolasgallagher.com/micro-clearfix-hack
一部の例は構造がわずかに異なりますが、特定の各例でこれをより詳細に検討します。
例1
最初の例では、説明を要素のサイズに合わせて拡大し、要素自体の内側の影もアニメーション化します。 それでは、要素の位置、要素の影、遷移を決定しましょう。
.ch-item { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: relative; cursor: default; box-shadow: inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }
アイテムに対して2つのクラスを定義します。1つはch-itemで、もう1つは背景画像を定義するために使用されます。
.ch-img-1 { background-image: url(../images/1.jpg); } .ch-img-2 { background-image: url(../images/2.jpg); } .ch-img-3 { background-image: url(../images/3.jpg); }
アイテムの説明は絶対に配置され、半透明の背景に値をRGBAに設定します。 その透明度は0になり、0に縮小します。
.ch-info { position: absolute; background: rgba(63,147,147, 0.8); width: inherit; height: inherit; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); }
要素のタイトルには、テキストのインデントと滑らかな影があります。
.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 45px 0 0 0; height: 140px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); }
Pタグの不透明度は0で、トランジションがあります（マウスにカーソルを合わせると表示されますが、遅延が発生します）。
.ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: all 1s ease-in-out 0.4s; }
リンクは大文字になり、黄色にカーソルを合わせると色が変わります。
.ch-info pa { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info pa:hover { color: rgba(255,242,34, 0.8); }
そして今、マウスをホバーするときに起こる最も興味深いことです！
この要素はアニメーション化され、その影は半径を16ピクセルから1ピクセルに変更します。
.ch-item:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1); }
説明がスムーズに表示され、1にスケーリングされます。
.ch-item:hover .ch-info { transform: scale(1); opacity: 1; }
段落が表示されます（遅れて）：
.ch-item:hover .ch-info p { opacity: 1; }
最初の例で完了です！ 以下を見てみましょう。
例2
この場合のHTML構造は、最初の例と同じです。
ここでは、要素に影を使用して円を塗りつぶし、影を説明の背景として使用します。
そのため、ここには特別なものは何もありません。シャドウのみに値の行があります。
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: inset 0 0 0 0 rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.1); transition: all 0.4s ease-in-out; }
背景画像：
.ch-img-1 { background-image: url(../images/4.jpg); } .ch-img-2 { background-image: url(../images/5.jpg); } .ch-img-3 { background-image: url(../images/6.jpg); }
説明は再び非表示になります。
.ch-info { position: absolute; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; opacity: 0; transition: all 0.4s ease-in-out; transform: scale(0); backface-visibility: hidden; }
活版印刷要素のスタイルを定義します。
.ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 22px; margin: 0 30px; padding: 65px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info pa { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info pa:hover { color: rgba(255,242,34, 0.8); }
カーソルを合わせると、要素の内側の影（赤味がかった色）が半径110ピクセルにアニメーション化されます。 彼女は円全体をカバーします：
.ch-item:hover { box-shadow: inset 0 0 0 110px rgba(200,95,66, 0.4), inset 0 0 0 16px rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.1); }
表示されるように説明を増やします。
.ch-item:hover .ch-info { opacity: 1; transform: scale(1); }
例3
この例では、回転を試します。 スケッチに2つ目のブロックを追加する必要があるため、構造は最初の2つの例とわずかに異なります。 したがって、要素は次のようになります。
<li> <div class="ch-item"> <div class="ch-info"> <h3>Music poster</h3> <p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p> </div> <div class="ch-thumb ch-img-1"></div> </div> </li>
要素ブロックのスタイルは以前と同じです（薄い影付き）。
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
スケッチの場合、transform-originプロパティと遷移を定義します。 これは、マウスにカーソルを合わせたときに下に表示する要素になり、同時に要素の説明を表示します。
.ch-thumb { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; position: absolute; box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5); transform-origin: 95% 40%; transition: all 0.3s ease-in-out; }
疑似クラスの後に：を使用して、放射状の勾配を持つ小さな銅のラッチを作成します。
.ch-thumb:after { content: ''; width: 8px; height: 8px; position: absolute; border-radius: 50%; top: 40%; left: 95%; margin: -4px 0 0 -4px; background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%); box-shadow: 0 0 1px rgba(255,255,255,0.9); }
各要素の背景画像を定義しましょう：
.ch-img-1 { background-image: url(../images/7.jpg); z-index: 12; } .ch-img-2 { background-image: url(../images/8.jpg); z-index: 11; } .ch-img-3 { background-image: url(../images/9.jpg); z-index: 10; }
アイテムの説明には次のスタイルがあります。
.ch-info { position: absolute; width: inherit; height: inherit; border-radius: 50%; overflow: hidden; background: #c9512e url(../images/noise.png); box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05); }
文字体裁要素は次のように様式化されています
.ch-info h3 { color: #fff; text-transform: uppercase; position: relative; letter-spacing: 2px; font-size: 18px; margin: 0 60px; padding: 22px 0 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); }
リンクは小さな円の形になり、ホバーすると右に移動します。
.ch-info pa { display: block; color: #333; width: 80px; height: 80px; background: rgba(255,255,255,0.3); border-radius: 50%; color: #fff; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 24px; margin: 7px auto 0; font-family: 'Open Sans', Arial, sans-serif; opacity: 0; transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s; transform: translateX(60px) rotate(90deg); } .ch-info pa:hover { background: rgba(255,255,255,0.5); }
透明度の移動と変化は遅れて発生しますが、背景が変化せずに変化するため、トランジションを分離します。
ホバリングするとき、スケッチを回転させ、リンクを移動/回転させます：
.ch-item:hover .ch-thumb { box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2); transform: rotate(-110deg); } .ch-item:hover .ch-info pa{ opacity: 1; transform: translateX(0px) rotate(0deg); }
例4
4番目の例には3D要素が含まれます。 したがって、透視図と前面と背面のコンテナを作成するには、構造をわずかに変更する必要があります。 したがって、リスト項目は次のようになります。
<li> <div class="ch-item ch-img-1"> <div class="ch-info-wrap"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h3>Bears Type</h3> <p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p> </div> </div> </div> </div> </li>
ご覧のとおり、要素ブロックの背景画像と、反転する要素の前面を追加しました。
秘Theは、ページの残りの部分と同じ背景をch-info-wrapに設定することです。 これにより、要素に穴があるという錯覚が生じます。
この要素には通常のスタイルがあります。
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
追加のブロックがパースペクティブに使用され、シャドウのトランジションを追加します：
.ch-info-wrap{ position: absolute; width: 180px; height: 180px; border-radius: 50%; perspective: 800px; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }
ch-infoクラスを持つブロックには、transform-styleのpreserve-3d値があり、この要素は3Dで回転するため、遷移を設定します。
.ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; transform-style: preserve-3d; }
前面と背面のスタイルは次のとおりです。
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; backface-visibility: hidden; }
裏面が回転するため、最初から見る必要はありません。
.ch-info .ch-info-back { transform: rotate3d(0,1,0,180deg); background: #000; }
また、背景画像：
.ch-img-1 { background-image: url(../images/10.jpg); } .ch-img-2 { background-image: url(../images/11.jpg); } .ch-img-3 { background-image: url(../images/12.jpg); }
...および活版印刷要素：
.ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 15px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info pa { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info pa:hover { color: rgba(255,242,34, 0.8); }
ホバリングするとき、ラッパーの影を変更し、反対側が見えるように回転します。
.ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8); } .ch-item:hover .ch-info { transform: rotate3d(0,1,0,-180deg); }
例5
この例では、スケッチの内部を0に縮小し、アイテムの説明を表示して1に拡大縮小します。
5番目の例の構造は、前の例と同じです。
このアイテムには通常のスタイルがあります。
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
ラッパーと説明ブロックには、次の一般的なスタイルがあります。
.ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; }
前の例のように、もう一度トリックを使用して、ページと同じラッパーの背景を設定します。
.ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); }
「フロント」および「リア」ブロックの一般的なスタイル：
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; }
「フロント」には遷移があります（減少して消えます）。
.ch-info .ch-info-front { transition: all 0.6s ease-in-out; }
説明を含む「戻る」ブロックは、最初は透明度が0で、その後1.5に増加します。
.ch-info .ch-info-back { opacity: 0; background: #223e87; pointer-events: none; transform: scale(1.5); transition: all 0.4s ease-in-out 0.2s; }
背景画像と活版印刷要素のスタイルは、前の例と同じスタイルになりますが、いくつかの色が異なります。
.ch-img-1 { background-image: url(../images/13.jpg); } .ch-img-2 { background-image: url(../images/14.jpg); } .ch-img-3 { background-image: url(../images/15.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; margin: 0 15px; padding: 40px 0 0 0; height: 80px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px 0; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info pa { display: block; color: #e7615e; font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info pa:hover { color: #fff; }
ホバリングするとき、スケッチの内部を0に減らし、「フロント」ブロックの不透明度を0に設定します。
.ch-item:hover .ch-info-front { transform: scale(0); opacity: 0; }
説明を含む部分のサイズが変更され、画面に表示されます。
.ch-item:hover .ch-info-back { transform: scale(1); opacity: 1; pointer-events: auto; }
実施例6
この例では、サムネイルの内側を下にして説明を表示します。 HTMLは、前の2つの例と同じになります。
要素のスタイルは以前と同じになります。
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; }
説明付きのラッパーと要素の一般的なスタイル：
.ch-info-wrap, .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; transition: all 0.4s ease-in-out; }
シェルには次の可能性があります。
.ch-info-wrap { top: 20px; left: 20px; background: #f9f9f9 url(../images/bg.jpg); box-shadow: 0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8); perspective: 800px; }
変換の情報要素に次のスタイルを設定します。
.ch-info { transform-style: preserve-3d; }
前面と背面に移行があります。 今回はbackface-visibility：hiddenを設定しないことに注意してください。これは、下に反転するときにスケッチの内側の背面を表示するためです。
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.6s ease-in-out; }
正しいtransform-originを設定して、それを開きます。
.ch-info .ch-info-front { transform-origin: 50% 100%; z-index: 100; box-shadow: inset 2px 1px 4px rgba(0,0,0,0.1); }
説明のある要素の背景に不透明度0のRGBA値を設定します。
.ch-info .ch-info-back { background: rgba(230,132,107,0); }
他の要素の通常のスタイル：
.ch-img-1 { background-image: url(../images/16.jpg); } .ch-img-2 { background-image: url(../images/17.jpg); } .ch-img-3 { background-image: url(../images/18.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; margin: 0 25px; padding: 40px 0 0 0; height: 90px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info pa { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info pa:hover { color: rgba(255,242,34, 0.8); }
ホバリングするとき、前部を回転させ、影を少しアニメーション化します。
.ch-item:hover .ch-info-front { transform: rotate3d(1,0,0,-180deg); box-shadow: inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3); } .ch-item:hover .ch-info-back { background: rgba(230,132,107,0.6); }
実施例7
最後の例は、回転する立方体の形になります。ここでは、説明を回転させて開きます。 各面を回転させるため、追加のシェルは必要ありません。 したがって、HTMLは次のようになります。
<li> <div class="ch-item"> <div class="ch-info"> <div class="ch-info-front ch-img-1"></div> <div class="ch-info-back"> <h3>Mouse</h3> <p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p> </div> </div> </div> </li>
要素のパースペクティブプロパティを定義します。
.ch-item { width: 100%; height: 100%; border-radius: 50%; position: relative; cursor: default; perspective: 900px; }
ch-infoクラスを持つ要素の場合、preserve-3dが必要です。
.ch-info{ position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; }
表と裏にトランジションがあり、transform-originは50％0％に設定されます：
.ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; transition: all 0.4s linear; transform-origin: 50% 0%; }
前面に素敵な影を作成しましょう：
.ch-info .ch-info-front { box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3); }
最初は反対側が非表示になります。
.ch-info .ch-info-back { transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg); background: #000; opacity: 0; }
背景画像とテキスト要素の通常のスタイルを設定します。
.ch-img-1 { background-image: url(../images/19.jpg); } .ch-img-2 { background-image: url(../images/20.jpg); } .ch-img-3 { background-image: url(../images/21.jpg); } .ch-info h3 { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; margin: 0 15px; padding: 60px 0 0 0; height: 110px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 30px; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.5); } .ch-info pa { display: block; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info pa:hover { color: rgba(255,242,34, 0.8); }
translate3dを使用して、3DスペースのY軸に沿って前部を移動し、rotate3dを使用して実際に回転させます。 また、後で表示される部分がないように、徐々に非表示にします。
.ch-item:hover .ch-info-front { transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg); opacity: 0; }
反対側は0度に「戻る」ようになります（最初は下に向けられました）。
.ch-item:hover .ch-info-back { transform: rotate3d(1,0,0,0deg); opacity: 1; }
それだけです！
私はあなたがそれを楽しんだことを望み、これらの効果はあなたに役立つでしょう！
デモンストレーション
ソースファイルをダウンロードする