マウスオーバーでリンク画像に変化をつける

 

自分がしたことを忘れないように記事にしました。

やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。

いろいろ探したのですが、逆のパターンやリンクがないのは結構あったのですが、なかなか思うようなものがなくて、自分なりにアレンジしてやってみました。

結果は、CSSだけでできるので簡単に導入できます。




 

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%;
}

　

デモ

hover
マウスオーバー

　

　

ポイント・説明

➊マウスを乗せていないときは、うっすらと黒色がかかっていますが、マウスを乗せると先ほどの黒いマスクが消えてリンク画像が明るく見えてきます。

➋キャプション（テキスト）まで消えてしまわないようにマウスオーバーでも変化しないようにしています。

➌マスクが消えるだけだとありきたりなので、マウスオーバーで画像がだんだん大きくなるようにしています。マウスが外れると画像も元に戻ります。

➍画像にキャプション付きのエフェクトだけでなく、リンクもつけるようにしました。

➎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で指定すると、複数の画像を並べてメニューとして使えます。