How to set opacity of svg from 0 - 1 when hovering a parent element?

I'd like to create a hover statement on a container, where when i hover over the Parent, it moves 40px to the right, and a yellow box sets its opacity from 0 to 1. The 40px to the right works just fine. But the box problem is killing me.

   <div class="Parent">
            <svg class="YELLOW_BOX" viewBox="0 0 1180 140">
                <rect class="Yellow_box_class" rx="0" ry="0" x="0" y="0" width="1180" height="140">
                </rect>
            </svg>
            <div class="TEXT_Class">
                <span>TEXT</span>
            </div>
        </div>

.Parent:hover {
    position: absolute;
    transform: translate(40px, 0);
    width: 1180px;
    height: 199px;
    left: 46px;
    top: 50px;
    overflow: visible;
}

How do i set the opacity of "YELLOW_BOX" to 1, when hovering the parent?