投稿画像の写真にマウスオーバーした際にアイコンを表示する
-
WordPressで投稿画像の写真にマウスオーバーした際に、アイコンを表示したいです。ベースとなる写真はリンクになっています。画像のサイズがまちまちであるため、中央にアイコンをのせたいです。
中央に表示することはできましたが、マウスオーバーした際の挙動がおかしいです。おそらくですが、マウスオーバーしたとき、判定する位置がずれているんだと思います。判定位置を直すと、アイコンが左上に表示されてしまいます。
つまり、現在、片方はできると片方がおかしくなる状態です。いろいろと試したのですが、うまくいきません。。
以下、ソースになります。
● アイコンは中央に表示できますが、位置がずれています。上から左からマウスを持ってくると、反応しません。理屈はわかるのですが、解決方法がわかりません。。
<a href="http://" target="_blank" class="item"> <span class="overlay"></span> <img src="http://aaa.com/picture.jpg" /> </a>
a.item{ position:relative; float:left; }
span.overlay{ position:absolute; top: 50%; left: 50%; margin-top:-15px; margin-left:-15px; width:100%; height:100%; background-image:url(../uploads/images/icon.png); background-repeat:no-repeat; opacity: 0; filter:alpha(opacity=0); }
span.overlay:hover { opacity: 1; filter: alpha(opacity=100); }
● topとleftを動かさなければ、位置はあいますが、アイコンが左上に表示されます。marginなどいろいろと試しましたが、中央に持ってくることができませんでした。
span.overlay{ position:absolute; top: 0px; left: 0px; margin-left: auto; margin-right: auto; width:100%; height:100%; background-image:url(../uploads/images/icon.png); background-repeat:no-repeat; opacity: 0; filter:alpha(opacity=0); }
お手数かと思いますが、アドバイスいただけると助かります。
6件の返信を表示中 - 1 - 6件目 (全6件中)
6件の返信を表示中 - 1 - 6件目 (全6件中)
- トピック「投稿画像の写真にマウスオーバーした際にアイコンを表示する」には新たに返信することはできません。