CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセントに使える!!

公開日:  最終更新日:2015/12/16

CSSだけでマウスオーバー時の画像の見せ方色々・アニメーションも出来きてアクセントに使える!!
以前の記事


マウスオーバー時に画像を切り替えるという見せ方について紹介しました。よく見かける方法でアクセントとしても良いですよね。本日は、マウスオーバー時の画像の見せ方について他にも色々あるのでまとめてみました。javascript、jQueryなどを使った方法も含めると膨大な数になるので、今回はCSSのみを使った方法です。それでも組み合わせ次第で色々な表現が可能ですので、ぜひ参考にしてみてください。

スポンサードリンク

CSSだけでマウスオーバー時の画像の見せ方色々とコピペでどうぞ

jQueryなどのscriptは使わずにCSSのみでのシンプルな方法をまとめてみましたので、さくっとコピペでも活用できるかと思います。また、それぞれを組み合わせることもできるので工夫次第ではいろいろな表現が可能になっています。

sample.html

<a href="リンク先URL"> <img src="画像URL" alt="" /> </a>

↑↑のような画像にリンクを貼っている状態のタグをベースにサンプルを見ていきたいと思います。
ショップ内に配置している商品画像やバナーと考えたらイメージしやすいでしょう。

透過させる・半透明にする

a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}

枠線をつける

a:hover img {
border:2px #FF9900 solid;
}

サイズを変える

a:hover img {
width:150px;
height:150px;
}

位置をずらす

a:hover img {
position:relative;
top:10px;
left:10px;
}

傾ける

a:hover img {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
}


IE未対応
数値を増やせば角度が変わっていきます。逆の角度にしたい場合は、マイナスの値を設定します。

角丸にする

a:hover img {
border-radius: 10px;
}


IEには未対応
数値を増やすほど丸くなります。

円・楕円にする

a:hover img {
border-radius: 50%;
}


IE未対応
元画像のサイズが正方形なら円になりますが、長方形の場合は楕円になります。


今までのサンプルは、それぞれ個別に設定していますが同時に設定することも可能です。

枠線をつけて、透過させて、角丸にする

a:hover img {
border:2px #FF9900 solid;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
border-radius: 10px;
}

アニメーションさせながら切り替える

上記の内容でも切り替えは可能ですが、さらにCSSだけでアニメーションさせながら切り替えることも可能です。
「transition」というプロパティを追加します。

【記述】
transition: プロパティ名 時間 アニメーション変化 ;
「all」とすれば「hover」で設定したすべてのプロパティがアニメーションされます。
時間は何秒でアニメーションさせるかを指定
秒なら「○s」、ミリ秒なら「○ms」となります。例)2秒なら 2s

【アニメーション変化】
ease(開始と終了が滑らか)、ease-in(ゆっくり始まる)、ease-out(ゆっくり終わる)、ease-in-out(ゆっくり始まってゆっくり終わる)、linear(一定)

など指定することで動きの経過速度に変化がつけれます。

また、実際に記述する際には「transition」の前に各ブラウザに対応するための接頭辞を入れる必要があります。

記述例

a img{
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
}
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
border-radius: 50%;
}

transitionの記述についてですが、:hover内に記述するのではなく、元の状態に対して記述する必要があります。

微妙な違いですが、変化の経過速度が変わってきます。


今回のサンプルは<a><img>タグしかないシンプルなものをベースに紹介してますが、<div>などと組み合わせればもっと色々な見せ方が可能です。ぜひ、試してみてください。

jQueryを使った画像マウスオーバーに関する他の方法




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑