HTML – Second IMG hover issue

  css, html, javascript

I have 2 semicircles stuck next to each other forming a circle. When I hover on the left semicircle, the right one lowers it’s opacity (which is what is supposed to do) but when I hover on the right one, the opacity doesn’t change at all.

HTML:

<div id="animation-components">
    <img src="leftball.svg" alt="" class="animation-item-01">
    <img src="rightball.svg" alt="" class="animation-item-02">
</div>

CSS:

#animation-components {}

    .animation-item-01 {
        display: inline;
        position: relative;
        margin-bottom: 240px;
        margin-top: 100px;
        transform: translate(631px,80px);
        height: 320px;
        transition: opacity ease 0.5s;
    }

    .animation-item-02 {
        display: inline;
        position: relative;
        margin-bottom: 240px;
        margin-top: 100px;
        transform: translate(627px,80px);
        height: 320px;
        transition: opacity ease 0.5s;
    }

    .animation-item-01:hover + .animation-item-02{
        opacity: 50%;
    }

    .animation-item-02:hover + .animation-item-01{
        opacity: 50%;
    }

What can I alter to make this work?

Source: Ask Javascript Questions

LEAVE A COMMENT