Hey, I'm kind of struggling right now and I'm not quite sure what to do.
I'm using simple divs as an example but I'm actually using an svg looking like this -->
<svg version="1.1" id="martini" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<g id="olive" class="oliveScale">
<line class="st0" x1="441.7" y1="187.6" x2="355.5" y2="322.2" />
<ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 15.3108 456.2295)" class="st1" cx="424.7" cy="214.1" rx="14.2" ry="20.8" />
<path class="st2" d="M432.3,230.5c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L432.3,230.5z" />
<ellipse transform="matrix(0.5395 -0.842 0.842 0.5395 -13.7086 454.2149)" class="st1" cx="408.4" cy="239.6" rx="14.2" ry="20.8" />
<path class="st2" d="M416,256c4.3-0.3,7.9-2,9.9-5.1c2-3.1,2.1-7.1,0.5-11.1L416,256z" />
</g>
<path id="stem" class="st3" d="M287.1,413.8c0,0,3.6-2.4,2.9,3.9c-0.7,6.3,3.6,188.5,3.6,188.5l-60.5,15.3c3.6,3.6,64.5,0,64.5,0
s53.9,3.2,63.3,0.6c0.5-0.1,0.4-0.8,0-0.9L302,606.2c-0.2-0.1-0.4-0.2-0.3-0.4c0.2-8.9,4.3-182,3.6-188.1c-0.6-5.2,1.8-4.5,2.6-4.1
L287.1,413.8z" />
<path id="gin" class="st4" d="M174.7,286.4c39.8,46.3,112.4,127.4,112.4,127.4l20.9-0.2c0.2,0.1,0.4,0,0.5-0.1
c4.6-5.1,73.7-82.4,112.1-127.2H174.7z" />
<path id="vermouth" class="st5" d="M420.6,286.4c15-17.5,25.3-30,25.3-31.4c0-4.8-4.4-6.3-5-6.5c0,0-0.1,0-0.1,0H154.4
c0,0-5.1,1.5-5.1,6.6c0,1.4,10.3,13.9,25.3,31.4H420.6z" />
</svg>
As shown in the Codepen, I have a slider with two different divs in them, here's what I want to do.
Once I hover over the div box that's NOT colored black, I want the black div box to move to the left and the other div to scale to ~1.3 and move to the right.
I'd know how to target more than one element using querySelectorAll but how do I give different animations to the elements I'm targeting at once?
Thanks in advance for the help and advice.