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

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65850919/new-to-css-not-sure-if-i-can-target-a-css-selector-within-another-css-selector

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>