I have a small problem. I want to get access to an image in an object and turn it invisible.

I have 2 images on top of each other and I want to make the one on top invisible. Can you help me, please?

I want to turn card1.png invisible.

That's my html code. (that's only one div of many) I have others also others.

<div class="karte" data-framework="card1">
     <img class="lock" src="pics/memoryBgI.png" alt="lockedCard">
     <img class="front" src="pics/card1.png" alt="card1">
     <img class="back" src="pics/memoryBg.png" alt="BackCard">
 </div>

if I console.log a specific variable I get this object:

<div class="karte" data-framework="card1">
     <img class="lock" src="pics/memoryBgI.png" alt="lockedCard">
     <img class="front" src="pics/card1.png" alt="card1">
     <img class="back" src="pics/memoryBg.png" alt="BackCard">
 </div>

so it's the same as my html file. I want to somehow get access to that image and change its style to invisible or hidden.

thank you