CSS 画像にホバーすると文字が出てくるエフェクトを作る方法

今回は、画像にホバーすると文字情報が表示されるエフェクトを作る方法を紹介します。CSS3のアニメーションや変形と組み合わせると、かなり色々なエフェクトを作ることができますが、ここでは一番シンプルなエフェクトを紹介します。

画像にホバーすると文字が出てくるエフェクトの作り方

DEMO

ホバーで文字が出てくるエフェクトのデモ

まずはデモをご覧ください。ホバーすると画像が白っぽくなり、文字がふわっと浮き上がります。このような見た目のエフェクトを作る方法は色々ありますが、今回は以下のような構造にしています。

  • 画像をdiv要素の背景に指定
  • 文字はdivの子要素の p に入れる
  • オーバーレイ(画像の上に乗せる色)を div の疑似要素 ::before で作成

文字の p 要素とオーバーレイの ::before は、普段 opacity: 0; で透明にしておき、ホバー時に opacity: 1; で表示されるようCSSを書きます。

CSSを書くときは、ホバーの指定をするセレクタの書き方がポイントになってきます。上の構造では「divにホバーした時のp要素」と「divにホバーした時の::before疑似要素」を表すセレクタを使います。

  • divにホバーした時のp要素「div:hover p
  • divにホバーした時の::before疑似要素「div:hover::before

以下に、具体的なコードを載せます。

コードの例

HTML

<div>
 <p>当店のパンはすべて自家製。<br>焼きたてをご提供しています。</p>
</div>

CSS

div {
 position: relative;
 width: 640px;
 height: 426px;
 margin: 50px auto;
 border: 1px solid #dfdfdf;
 background: url(../images/bread.jpg); /*画像は背景で指定(divの中にimg要素を入れ子にしてもOK)*/
 }
 div::before { /*オーバーレイ(画像に色を被せる)のスタイル*/
 content: "";
 position: absolute; /*positionがないとheight:100%;が効かない*/
 width: 100%; /*div要素いっぱいに広がるようにする*/
 height: 100%; /*div要素いっぱいに広がるようにする*/
 background: rgba(255,255,255,0.70);
 }
 p {
 position: relative;
 top: 50%; /*p要素を垂直方向中央に表示*/
 color: #222;
 font-size: 160%;
 text-align: center;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%); /*p要素を垂直方向中央に表示*/
 }
 div::before,
 p {
 opacity: 0; /*普段は文字とオーバーレイを透明にしておく*/
 -webkit-transition: 1s;
 transition: 1s;
 }
 div:hover p,
 div:hover::before {
 /*「divにホバーした時のp」と「divにホバーした時のbefore疑似要素」に対してスタイル指定*/
 opacity: 1; /*ホバー時に文字とオーバーレイを表示*/
 }

オーバーレイの疑似要素や文字をアニメーションで動かすと、色々なバリエーションを作ることができます。ぜひ試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>