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の向上も期待できる
