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

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以下のブラウザのサポートが終了していますので、ここではスルーさせていただきますね(・-・)

参考にしたサイト

ピックアップ記事

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。