マウスオーバーでリンク画像に変化をつける
投稿日:
自分がしたことを忘れないように記事にしました。
やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。
いろいろ探したのですが、逆のパターンやリンクがないのは結構あったのですが、なかなか思うようなものがなくて、自分なりにアレンジしてやってみました。
HTML
<figure><a href="#"><img src="image01.jpg" alt="イメージ01"> <figcaption></figcaption> <span>hover<br>マウスオーバー</span></a> </figure>
<a href="#">については、ご自身のリンク先を指定
<img src="image01.jpg" alt="イメージ01">については、ご自身の画像までのアドレス
<span>hover<br>マウスオーバー</span>については、リンク画像の上に文字を乗せています。
CSS
cssファイルには以下のように記述
/* マウスオーバー */ figure img { height: auto; -webkit-transition:all 2s ease-in-out; transition:all 2s ease-in-out; width: 100%; vertical-align: bottom; } figure { margin: 0; overflow: hidden; position: relative; text-align: center; width:100.05%; } figcaption { background-color: rgba(0,0,0,0.6); color: #FFF; opacity: 1; font-size: 16px; position: absolute; text-align: center; -webkit-transition:all 2s ease-in-out; transition:all 2s ease-in-out; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } figure a:hover>img{ transform: scale(1.15,1.15); -webkit-transform:scale(1.15,1.15); -moz-transform:scale(1.15,1.15); -ms-transform:scale(1.15,1.15); -o-transform:scale(1.15,1.15); } figure a:hover>figcaption{ opacity: 0.4; } figure span{ color: #FFF; opacity: 1; font-size: 1.6rem; position: absolute; text-align: center; top: 0; left: 0; right: 0; bottom: 0; margin: auto; padding-top: 25%; }
デモ

マウスオーバー
ポイント・説明
➊マウスを乗せていないときは、うっすらと黒色がかかっていますが、マウスを乗せると先ほどの黒いマスクが消えてリンク画像が明るく見えてきます。
➋キャプション(テキスト)まで消えてしまわないようにマウスオーバーでも変化しないようにしています。
➌マスクが消えるだけだとありきたりなので、マウスオーバーで画像がだんだん大きくなるようにしています。マウスが外れると画像も元に戻ります。
➍画像にキャプション付きのエフェクトだけでなく、リンクもつけるようにしました。
➎cssファイルのfigureにwidth:100.05%;という微妙な数字は、イージング効果でブラウザによっておこる1pxのずれを無理やりなくしています。
➏cssファイルのfigure spanにpadding-top:25%;というのは、テキストの配置場所です。ここの数字を変えると見え方が変わります。
➐cssファイルのfigure a:hover>imgに、transform: scale(1.15,1.15);は、数字を変えることで画像の大きさが変わってきます。
➑cssファイルのfigure a:hover>figcaptionに、opacity: 0.4;というのは、うっすらと黒色のマスクの透過度合です。数字を変えると見え方が変わります。
➒cssファイルのfigcaptionに、transition:all 2s ease-in-out;というのは、変化するスピードなので、数字を変えると見え方が変わります。
➓10.<div></div>
などで囲って、cssで指定すると、複数の画像を並べてメニューとして使えます。
関連記事
-
-
WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた⑤
1.選手一覧、メンバー一覧表示 選手登録を、とりあえず5名登録したら、今度は一覧表示で見てみたいです。 そこで、前回説明した「archive-member.php」を使って …
-
-
WordPressのプレビューで変更されていない時にチェックすること
WordPressで固定ページや投稿ページまたは、カスタム投稿タイプでテキストの色を変更したり、大きさを変更するなどしてプレビュー画面で確認したが、変わってない!ってことはないですか? また、cssや …
-
-
Webとは?の記事に出てきた『ホームページ』ですが、 細かく言うと、 ・画面を開いたとき(起動時)に表示されるように設定されたページ ・ホームボタンを押した時に表示されるように設定されたページ それ以 …