JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="menu-block">
  <div class="menu-titles"><span><p class="title">Brunch</p></span></div>

  <div class="meal_unit">
    <div class="child">
      <span class="name"> <p>Food</p></span>
      <img id="img1" class="food" visible src="https://jsfiddle.net/img/logo.png" alt="food" />
    </div>
    <div class="child-2">
      <span class="price"><p>$20.00</p></span>
    </div>

CSS

.food {
display:none;}

/* This works but I want it work specific over the dish: */
.child:hover img {
display: block;}

/*I want this to work instead, but it doesn't. Why?  
What's the correct path? Or how do I approach this?*/
.dish:hover img{
 display:block}