动画堆叠徽标

Question

我有一个徽标，该徽标被切成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>