CSSでマウスホバー時のREAD MOREアニメーションを作る

よくブログなどで見かけるマウスホバーすると画像が暗くなってREAD MOREと文字が表示されるアニメーションを作ってみたいと思います。画像にマウスを乗せた時のホバーアニメーションって案外どうするか悩みますよね。今現在このブログも特になにもつかっていません。でもこのアニメーションを使うとそれっぽく見えてホームページが様になると思います。

CONTENTS

DEMO

1.基本のHTML

まずは基本のHTMLから。HTMLはとくに難しいことはしておらず、3カラムのリストです。ブログでよく使いそうな形にしました。

2.CSS擬似要素:beforeで画像を覆う背景を作る

今回の記事に関係のないであろう細かいデザインのCSSはソースを見てもらうとして、まず画像を囲んでいる< p> 要素(ここではimageというクラスをつけています)にposition:relativeを指定し、これから作っていく要素の親要素とします。そしてclass="img"のa要素に擬似要素:beforeをつけます。before(前)です。擬似要素では指定した要素の前後にテキストやアイコンなど様々なものを入れることができます。

position:absoluteの値は全て0にし、高さも画像で設定している高さに合わせておきます。そして、背景色を黒に、opacityは0にします。さらにtransitionも加えておきます(transitionでアニメーションをつけます。)。transitionについては「CSSのみで横並びのプルダウンメニューを作る」の記事で少しだけ触れてますので、よかったら合わせてご覧ください。

3.CSS擬似要素:afterでREAD MOREを表現する

続いてREAD MOREを作りたいと思います。READ MOREはCSSの擬似要素:after(後)で作ります。

contentの中にREAD MOREを入れることでテキストとしてREAD MOREを表示させます。幅150pxのボックスの中にテキストを入れているのですが、このボックスを画像の中央にもってくる必要があります(今回の場合)。position:absoluteで上と左を指定します。まず、左から50%を指定して親要素から半分のところにくるようにします。ところがこれはボックスの左端から50%なのでそのままだと一番左が真ん中に来てしまいます。それを回避するために幅150pxの半分75pxをネガティブマージンで指定して、真ん中にくるように指定します。

次にtopです。トップもさきほどと同じように考えます。今回画像の高さは150pxボックスの文字サイズは13px、paddingは上下10pxを足して20px、ボーダーのサイズ3p×2となりますので、6px、全てを足すと39pxになります。さきほどと同じようにボックスの半分の値と親となる画像の高さの半分の値を出します。すると、ボックスは39÷2=19.5、画像は150÷2=75となります。あとは75-19.5=55.5となりますので、topに55.5pxを指定します。

4.通常時はREAD MOREを非表示にする

通常時はREAD MOREは見えないようにして、マウスホバーの段階で表示させたいので、さきほどのCSSを少し変更します。

まずせっかくさっきleftを指定しましたが、ここでは150%にして画像の外に飛ばしておきます。さきほど指定したleftはホバー時に使います。この時画像のクラスにoverflow:hiddenを指定してはみ出した値を隠すようにします。opacity:0を追加してtransitionは全てを適用するプロパティallにしています。

5.マウスホバー時の指定

マウスホバー時の設定です。最初に作った黒い背景のホバー時の動きは画像が薄暗くなるようにしたいので、下記のように指定します。

最初にtransitionで動きをつけているので動きをつけた状態になってると思います。これで背景の黒は完成です。続いてREAD MOREのボックスです。

ここでさきほど書き直したleft:50%を使います。そして、非表示だったopacityを1にして表示させます。以上で完成となります。

DEMO

6.マウスホバーアニメーション別パターン

さきほどのREAD MOREを少し変えて別パターンを作ってみました。

下から登場するパターン

DEMO

ふんわり出現するパターン

DEMO

topやleftなどの値は使用せず、ただopacity0から1に表示するようにしました。他にもtransitionのアニメーションを変えるだけで様々なパターンが作れそうですね。

コメントを残す

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

Related Posts

firefoxやchromeでwebフォントが表示されない時の対処法

CSS 縦横比を維持し、背景画像(background-image)を横幅いっぱいに可変表示する方法

CSSで蛍光ペンで下線を引いたようなマーカー風デザインを作る方法