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

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

関連記事

webとは

Webとは?

今さらですが、当たり前のように使っている、口にしている『web(ウェブ)』ですが、 World Wide Web(ワールド・ワイド・ウェブ、略名:WWW)のことで、 Webとは、世界中に張り巡らしたよ …

ヘッダー固定

【簡単】wordpress スクロールするとヘッダーが固定される

  ①一番最初に見えるヘッダーをカスタマイズ header.phpファイルに使っているテーマにより若干違いはありますが、下記のようなコードが記述されていると思います。 <div id= …

ワードプレスにアメブロ

ワードプレスにアメブロ

  ワードプレスの固定ページにアメブロの記事を読み込む WordPressでホームページを作りたいけどアメブロを止めたくない ブログを作成するなら有名なアメブロが簡単で始めやすいので、今も更 …

選手登録メンバー登録

WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた④

  1.アイキャッチ画像をカスタマイズ   テーマによっては、変更しなくてもきれいに表示されることもあります。 メンバー紹介などの個人個人のページでは、300px×400pxの画像 …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …