Javascript – How to make the text under my picture change when hovering over the picture (html, css, javascript)

Problem:

I am making a site for a school project and for some nice interactions I want to make the text change color when hovering on the picture above the text.

Example:
I have a picture of a pc. When I hover over the pc the name of the pc (which is under the pc) will change color to, for example, purple. If I hover over the name itself then it will also change color. The picture will only change color when hovering over it (already got that covered). Can someone maybe help me with a for this? Or an inbuild function? I’m kinda new to css and still need to learn a lot about it so anything that works will be greatly appreciated.
I have a container and in the container the div boxes for the picture and for the text are both separated
Here is the code:

HTML

<div class="item">
        <div class="container_pictures">
          <img src="Pc pics/Purple1.png" class="Pc-pics">
        </div>

        <div class="container_pc-info">
          <div class="pc-info">
            test 1 <!-- Only this text needs to be changed. Currently it's color is white -->
          </div> <!-- The new color doesn't matter since I can probably change that -->

          <div class="pc-info">
            test 2
          </div>

          <div class="pc-info">
            test 3
          </div>
          

CSS (The important parts are the item class and the containers inside of it. The padding size and display don’t matter, only the color needs to change of the text. Gave everything just in case)

.item {
  display: flex;                      /* All of the colors don't have to be variables, it's just handier */
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: calc(15% + 60px);
  height: 100%;
  margin-top: 4%;
}

.container_pc-info {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;

  
  height: 12vw;
  width: 100%;
  margin-top: 8%;
  background: black; /* just for testing, don't think it's important */
  
}

.pc-info {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-header); 
  font-size: 1vw;
  font-family: "priori-sans", sans-serif;
  color: white;
}

.pc-name {
  height: 0%;
  width: 0%;
  color: var(--color-pcInfo-text);
}

.container_pictures {
  height: 100%;
  width: 100%;
  padding: 1.6em;
  border: 3px solid var(--color-border-items);
  background-color: var(--color-test-background);
  transition: all 0.3s ease;
}

.container_pictures:hover {
  padding: 0.8em;
  background-color: var(--color-border-header-test);
  border-bottom: 3px solid var(--color-border-header-test);
}

.Pc-pics {
  height: 100%;
  width: 100%;
}

I tried searching for ways to make an if statement when the color of the picture changes or when the size of the picture changes, but I couldn’t find anything.
Then I tried making something with :hover but that didn’t work either

.pc-name {
  height: 0%;
  width: 0%;
  color: var(--color-pcInfo-text); /* This is white and it doesn't have to be a variable */
}

.pc-name.container-pictures:hover {
  color: aqua; /* This can also be a variable and the color doesn't matter */
/* The variables are in the :root */
}

Solution:

The element with class container_pictures and the element with class container_pc-info are siblings so you need to use the + selector. Also, to pick only the fist div with pc-info class you can use the :first-child pseudo class.

Putting it all together, you need something like this:

.container_pictures:hover + .container_pc-info .pc-info:first-child {
  color: red; /* you can change this as you please */
}