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

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

関連記事

画像のトリミング

object-fitで画像のトリミング

  PCとスマホで画像の見え方を変えるのに役立つのが、 cssの「object-fit」プロパティです。 背景画像として扱うcssの「background-size」というのもありますが、 …

スマホで予約システム

スマホで予約システムが無料で作れる

  今流行りの予約システム   以前から、サロン系やフィットネス系のオンライン予約を頼まれたことがあり、何度か作成してきましたが、 今回は、コロナの影響からも言えると思いますが、 …

メンバー紹介選手紹介

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

  WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思います …

cms

主要CMS5選を比較

世界のCMSシェア ”W3Techsの資料から” 2019年9月14日時点 1位:WordPress 59.5%(28.6%) 2位:Joomla 6.8%(3.3%) 3位:Drupal 4.7%( …

ホームページ集客

検索順位を上げるために

  ホームページを作った   今では、ホームページ作成が当たり前のようになってきましたね。 例えば、 ・食品関係の通販サイト ・雑貨の通販サイト ・会社の情報、紹介サイト ・美容室 …