マウスオーバーでリンク画像に変化をつける
投稿日:
自分がしたことを忘れないように記事にしました。
やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。
いろいろ探したのですが、逆のパターンやリンクがないのは結構あったのですが、なかなか思うようなものがなくて、自分なりにアレンジしてやってみました。
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でメンバー紹介や選手一覧などを作ってみた①
WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …
-
-
世界のCMSシェア ”W3Techsの資料から” 2019年9月14日時点 1位:WordPress 59.5%(28.6%) 2位:Joomla 6.8%(3.3%) 3位:Drupal 4.7%( …