CSSアニメーション 様々なデザインの実装
ホバーテキスト #3
はじめに
概要
Webサイトでよく見かけるアニメーションについて実装していきます。今回はホバーアニメーションについての解説になります。サンプルコードもダウンロードできますので、こちらで理解を深めていきましょう。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装動画
以下は、画像をホバーした際にテキストが表示されるシンプルなアニメーションです。また、画面幅を変更しても、画像の幅に合わせてホバーアニメーションが適用されます。
ポイント解説
HTML
<a href="/" class="box-link relative"> <img src="img.jpg" alt="" /> <span class="absolute">テキスト入力</span> </a>
親子関係を作る。ここでは画像をクリックした際に別ページへ遷移することを想定しています。
hoverさせるテキストをposition: absolute;に設定します。ここではspanがそれにあたります。これにより、画像幅に応じてアニメーションされます。
CSS
.box-link { display: block; width: 80%; max-width: 500px; margin: 0 auto; height: auto; &:hover { span { opacity: 1; } } img { width: 100%; } span { font-size: 2em; color: $cWhite; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); opacity: 0; transition: 0.5s; } }
aタグはインライン要素になりますので、ブロック要素に設定しています。
ホバーテキストの要素をopcity: 0;とし、transitionを設定。そして、aタグがホバーされた際にopacity: 1;になるようアニメーションを設定しております。
以上です。こちらの実装にお役に立てれば幸いです。
まとめ
- ホバーアニメーションの実装は親子関係を設定することが大切である
- 子要素にabsoluteを設定すると、親要素の幅に応じてアニメーションが実施される
- テキストで表示されるため、SEOの向上も期待できる