Web活のロゴ

Web制作Output&初心者のための徹底ガイド

CSSアニメーション 様々なデザインの実装
ホバーテキスト #3

2023.07.29
はじめに
概要

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