Анимированный логотип - PullRequest
0 голосов
/ 20 января 2019

У меня есть логотип, который разрезан на 8 частей, и я хочу, чтобы каждый элемент выделялся при наведении курсора мыши.К сожалению, мой опыт до сих пор заключался в том, что я смог выделить только первый слой, потому что те, которые находятся под первым, заблокированы для ролевой работы первым слоем: (

Есть идеи, как я могу заставить эту работу работать?

css

.logo {
    margin: -2.5% 0 0 0;
    position: absolute;
    height: 75%;
}

html:

<div class="page-header d-flex align-items-center">
    <div>
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer01.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer02.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer03.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer04.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer05.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer06.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer07.png' %}">
        <img class="logo" src="{% static 'gfx/logo/logo_layers/logo_layer08.png' %}">
    </div>
...