• 2017.9.30
• CSS
• コメントを書く

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;」がお手軽で便利