CSSで重ねた画像の一つだけを選択する方法

ある2枚の画像をCSSで重ねて1枚の画像のようにしたとき、そのうちの1枚だけを選択する方法を紹介します。
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。
どういうことかというと、例えば、下記の画像は、草原の背景写真に、馬のシルエット画像を重ねています。


このとき、馬だけを選択できるようにします。今回は馬にマウスオーバーしたとき、馬だけが少し透明になるようにしています。
画像の重ね方は、ここで説明すると長くなってしまいますので、はしょりますが、position:relativeとposition:absoluteで画像や文字を重ねてみようを参考にさせていただきました。
pointer-eventsで解決
お恥ずかしながら、初めて知った「pointer-events」というプロパティを使うことで、あっさりと解決できてしまいました。
pointer-eventsプロパティとは、簡単にいえば、マウスでクリックしたりドラッグしたり、オンマウス状態のときの動作、またスマホなどでしたらタップするといった操作をコントロールするCSSです。
このpointer-eventsに「none;」を指定することで、クリックやオンマウス時の動作を無効にします。
.nothover { pointer-events:none; }
class名は好きにつけてもらって大丈夫です。
そして、この「class=nothover」を、マウス動作が反応してほしくないところに指定します。今回の場合ですと、背景写真ですね。
<div class="relative"> <img src="背景画像.jpg" alt="" width="○○" height="○○" class="nothover alignnone size-full" /> <img src="馬の画像.jpg" alt="" width="○○" height="○○" class="absolute alignnone size-full " /> </div>
なお、「pointer-eventsプロパティ」は、IE10以下ではサポートされてないらしいですけど、そもそもIE10以下のブラウザのサポートが終了していますので、ここではスルーさせていただきますね(・-・)
参考にしたサイト
クリック・タッチを無効化するCSS「pointer-events: none;」がお手軽で便利
コメント
- トラックバックは利用できません。
- コメント (0)
この記事へのコメントはありません。