Web全般 wordpress

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

投稿日:

オンマウス

 

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

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

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

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

 



-Web全般, wordpress
-, , ,


comment

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

関連記事

表示件数

意外と忘れていた表示件数

  アーカイブの表示件数   WordPressのテーマをカスタマイズしていて、 記事の一覧表示やカスタム投稿の一覧表示を出力する【アーカイブ.php】で、 1ページに表示される件 …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

とくとくBBのWiMAX2+

とくとくBBのWiMAX2+を利用してみた

  実際に契約   一人暮らしの学生のWiFi環境を充実させるため、持ち運びが簡単で、設定も簡単ということで、 今回選んだのは、「とくとくBBのWiMAX2+」にしました。 機種や …

画像を順番に表示

画像を順番に重ねて表示

  画像を順番に重ねて表示したい。 画像を遅らせて表示したい。 画像に動きをつけたい。   今回は、WordPressでトップページ(フロントページ)のみ、動きのある画像を表示した …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …