New to CSS. Not sure if I can target a CSS selector within another CSS selector

Question

I have text centered over an image. I am trying to add a hover effect for the image where, on hover, the text disappears.

Here is my Code:

.menu-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #2376bc;
  margin: auto;
  position: relative;
  text-align: center;
  color: white;
}

.menu-photo img {
  opacity: 0.3;
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: transform .5s, opacity .5s;
}

.menu-photo img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.menu-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
}

<figure class="menu-photo">
  <img src="img/pepperoni-min.jpg" 
       alt="Spicy Pepperoni Pizza">
  <div class="menu-name">
    <strong>Spicy Pepperoni</strong>   
  </div>
</figure>

Answer 1

You can use the adjacent sibling selector (+)

.menu-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-color: #2376bc;
  margin: auto;
  position: relative;
  text-align: center;
  color: white;
}

.menu-photo img {
  opacity: 0.3;
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: transform .5s, opacity .5s;
}

.menu-photo img:hover {
  transform: scale(1.03);
  opacity: 1;
}

.menu-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 150%;
}
.menu-photo img:hover + .menu-name, .menu-name:hover {
  opacity:0 /* or display:none or visibility:hidden */
 }

<figure class="menu-photo">
                   <img src="https://via.placeholder.com/150" alt="Spicy Pepperoni Pizza" />
                   <div class="menu-name"><strong>Spicy Pepperoni</strong></div>
               </figure>