title: HTML / CSS: Have image with text on it in flex. But after hover, I want text to change and linear gradient black transparent from top to bottom
body: <p>I have been struggling a day now. been watching video and reading but still can not wrap my head around how to manage it.</p>
  <p>The problem is:</p>
  <p>There is a flex parent.</p>
  <p>2 children that shares 50 % width of the screen each.
  height is 200px.</p>
  <p>Inside the children I am adding image with text on top of it and with white transparent color ontop as a layer.
  I have designed it in adobe xd. Inserting picture of 1 flex children with image &amp; text on it here: <a href="https://i.stack.imgur.com/Na4ZS.png" rel="nofollow noreferrer">before hover</a></p>
  <p>After i hover, i want it to create a linear-grade where there is dark on top and more transparent at the bottom. On the dark side, i want text to appear.
  Here is the second picture from adobe XD when I hover: <a href="https://i.stack.imgur.com/VczhC.png" rel="nofollow noreferrer">when hover</a></p>
  <p>There is a href on the image.</p>
  <p>So how would I solve this problem? Could someone come with a example code?</p>
  <p>I have tried to code it. I kinda did manage to have text hover, but you guys probably have easier and better way coding it.</p>
  <p>Would appreciate all the help i can get. Been sitting hours with this.</p>
  <hr>
  <p><strong>UPDATE: MORE DETAILED</strong></p>
  <p>Okey posting the code here:</p>
  <p>also here is XD file of the project i am building. if you hover ur mouse over where it says MEN and WOMAN, you will see the effect i am trying to achive.
  <a href="https://i.stack.imgur.com/Na4ZS.png" rel="nofollow noreferrer">Adobe XD file</a></p>
  <p>here is netlify of what i have done: <a href="https://i.stack.imgur.com/VczhC.png" rel="nofollow noreferrer">https://hopeful-booth-b5fbb7.netlify.app/</a>
  you will see alot of boxes, thats just layout created so i can build on them.
  you can already see the image is a bit off, but i have kinda managed the text hover.</p>
  <p>The code is kinda mess, that's why I preferred it to be built :-/</p>
  <p>you can inspect the code to have better overview i guess.</p>
  <p>Html:
  Section inside main.</p>
  <pre><code>&lt;section class=&quot;one&quot;&gt;
      &lt;div class=&quot;box4&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;link__men-jacket&quot;
          &gt;&lt;span class=&quot;text&quot;&gt;
            &lt;h1&gt;Click here to go to mens jacket&lt;/h1&gt;
          &lt;/span&gt;
          &lt;img
            src=&quot;img/Men-Style-in-Monsoon.jpg&quot;
            alt=&quot;New-Men-Jackets&quot;
            class=&quot;new__men--img&quot;
          /&gt;
        &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;box5&quot;&gt;&lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  <p>CSS file:</p>
  <pre><code>.one {
   width: 100%;
   display: flex;
  }
   .box4 {
   background-color: indianred;
   height: 200px;
   width: 50%;
  }
  
   .new__men--img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    }
  
    .link__men-jacket {
     position: absolute;
    }
  
    .link__men-jacket .text {
     position: absolute;
     z-index: 10;
     opacity: 0;
     transition: all 0.8s ease;
     }
  
    .link__men-jacket .text h1 {
     margin: 0;
     color: white;
     display: flex;
     align-items: center;
     }
  
     .link__men-jacket:hover .text {
      opacity: 1;
      display: flex;
      align-items: flex-end;
      }
  
  
      .box5 {
       background-color: lemonchiffon;
       height: 200px;
       width: 50%;
       grid-area: box5;
  }
  </code></pre>