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

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

関連記事

dobbyドローン

Webサイトとドローン

規制対象外の小型ドローン 国内では現在200g未満のドローンは申請が入らないので、簡単に飛ばすことができます。 ただ、当たり前ですが危険な場所はやめた方がいいです。 大きさはスマホくらいで、ちょっとが …

予約1

簡単にワードプレスで予約システムを作る

  シンプル予約システム MTS Simple Bookingを使う   WordPressでお店のホームページを作って、しかも予約システムも導入できたらいいのにと思って探していた …

パソコン

パソコン買うなら

  以前、パソコンを購入するときは近くの電気屋さんに行っていましたが、のちにDELLのオンラインショップで購入するようになりました。 最近では、オリジナルのパソコンを取り扱っているオンライン …

メニュー横並びいっぱい

メニューを横並びで中央に配置して、両端を伸ばす

メニューを横並びで中央に配置して、両端を伸ばす 基本 HTML <div class="menu"> <div class="menu-inner&qu …

sliderコピー

ヘッダーのスライドショーをページ毎に変える方法

前回の記事で、「ヘッダー画像やスライダーをページ毎に変える方法」を紹介しましたが、 今回は引き続き、スライドショーができるプラグインを使った方法をやってみましたので紹介します。   Smar …