title: JavaScript - If mouseover on the parent then effect on child
body: <p>I am trying to display a div with some text within some boxes when the mouse is on the box. </p>
  
  <p>My problem is that the box container <code>.card-indus</code> contain the title <code>.card-header</code> and the text to toggle <code>.text-image</code>. So I want to display the <code>.text-image</code> from <code>none</code> to <code>flex</code> whenever the user in on the parent box of that text-image. How can I do that?</p>
  
  <p><a href="https://i.stack.imgur.com/pvaNv.jpg" rel="nofollow noreferrer">without text</a>
  <a href="https://i.stack.imgur.com/FI3lH.jpg" rel="nofollow noreferrer">with text</a></p>
  
  <p>thank you!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>            &lt;div class="card-indus"&gt;
                  &lt;div class="card-header"&gt;
                      &lt;p&gt;Digital&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-content"&gt;
                      &lt;img src="../images/services/digital.jpeg"&gt;
                      &lt;p class="text-image"&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-indus"&gt;
                  &lt;div class="card-header"&gt;
                      &lt;p&gt;Healthcare&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-content"&gt;
                      &lt;img src="../images/services/healthcare.jpg"&gt;
                      &lt;p class="text-image"&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="card-indus"&gt;
                  &lt;div class="card-header"&gt;
                      &lt;p&gt;Industry&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-content"&gt;
                      &lt;img src="../images/services/industry.jpg"&gt;
                      &lt;p class="text-image"&gt;Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia voluptatibus numquam eveniet doloremque dignissimos veniam.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt; 
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.industries .container-industries .card-indus {
    position: relative;
    border: red solid 1px;
    color: white;
    max-height: 300px;
    overflow: hidden;
    height: 100%;
  }
  
  .industries .container-industries .card-indus img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  
  }
  
  .industries .container-industries .card-indus .text-image {
    display: none;
    position: absolute;
    color: red;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }
  </code></pre>