Форумы портала PHP.SU :: Версия для печати :: hover-эффект к png изображению

1. Ismail - 25 Ноября, 2013 - 15:52:15 - перейти к сообщению

Доброго времени суток! Подскажите, как в css применять hover эффект к png изображениям.

Например, есть два изображения html:

CODE (html):
скопировать код в буфер обмена

<div class="m">
<a href="" target="" title=""><img src="images/kapot.png" class="kapot" border="0"></a>
<a href="" target="" title=""><img src="images/krilo.png" class="krilo" border="0"></a>
</div>

css:

CODE (htmlphp):
скопировать код в буфер обмена

.m img {opacity:0;}
.m img:hover {opacity:1;}
.m img {position:absolute;}
.kapot {margin: 137px 0 0 82px;}
.krilo {margin: 155px 0 0 380px;}

Здесь при наведение на изображение, может случится такое, что мышь попадает в невидимую область и подсвечивается не то изображение.

Есть ли какое-нибудь решение?

p.s. Например, для появления тени в png изображении используется:

CODE (htmlphp):
скопировать код в буфер обмена

-webkit-filter: drop-shadow(5px 5px 5px #ddd);