размытие изображения в z-index при наведении

Question

Я пытаюсь сделать CSS анимацию при наведении на 3 изображения, накладываемых друг на друга.После наведения изображение предназначено для размытия.

Вот мой код

html:

<img class="leaves" src="leaves_01.png"/><img  class="flower" src="purple_orchid02.png"/><img  class="bird" src="bird_01.png"/>

css:

img:hover {
    -webkit-filter: blur(4px); /* Chrome, Safari, Opera */
    filter: blur(4px);
}
.leaves{z-index:1;
position:absolute;}
.flower{
    z-index: 999; 
    position:absolute;
}
.bird{
    z-index: 1000;
    position:absolute;
}

Мне удалось получить размытиенад слоем птица, но не остальные.Как получить размытие на каждом слое отдельно, но когда они наложены друг на друга?

Любые предложения более чем приветствуются.С уважением, Неко

Answer 1

Все ваши изображения покрывают всю страницу, поэтому только одно из них может получить событие при наведении курсора.Ваш z-индекс не имеет значения в этом сценарии, потому что три изображения не могут наслоиться и все еще будут доступны, когда они все одного размера.

Вам нужно будет отредактировать каждое изображение, чтобы оно соответствовало размеруфактический контент, а затем отрегулируйте свои слои в зависимости от размера каждого изображения.Например, птица должна представлять собой изображение только одной птицы, которое добавляется 3 раза, причем каждая из них должна располагаться отдельно.Тогда этому может быть присвоен самый высокий z-индекс, чтобы любые изображения под ним все еще были доступны.

Answer 2

Если вы хотите, чтобы наведите курсор на все изображения - используйте обертку, например div

<div class="wrapper">
  <img class="leaves" src="leaves_01.png"/>
  <img class="flower" src="purple_orchid02.png"/>
  <img class="bird" src="bird_01.png"/>
</div>

Теперь добавьте: hover в вашу обертку

.wrapper:hover { -webkit-filter: blur(4px); filter: blur(4px); }

Если выхотите обрабатывать каждое изображение отдельно, вы можете сделать

.wrapper:hover .leaves { ... } 
.wrapper:hover .flower { ... }
.wrapper:hover .bird   { ... }

Answer 3

Проблема в том, что ширина изображения вашей птицы полностью покрывает другие изображения, поэтому, когда вы пытаетесь навести курсор на тех, кого вы на самом деле зависаете над изображением птицы.Вам нужно сохранить два верхних png-файла без холста, чтобы они не мешали изображениям ниже.