I need help with this code

See more:

CSS

HTML

Please I need help with this code. The h2 title is hidden. It appears only when I hover on image. I want to make it visible even without hover on image.

html:

<label class="textOverImage" style="background-image:url(https://up129in.screenrec.com/images/f_VxRM4YNzbqP9Ipc5ilKWy2aJ8vkF0grU.png)">
  <input type="checkbox">
  <h2>Grapes</h2>
  <div>
    Grapes can be eaten fresh as table grapes or they can be used for making wine, jam, juice, jelly, grape seed extract, raisins, vinegar, and grape seed oil
  </div>
</label>

css:

.textOverImage{
    width:200px;
    height:200px;
    display:inline-block;
    background-size:cover;
    border-radius:4px;
    margin:4px;
    position:relative;
    cursor:pointer;
    overflow:hidden;
  }
  
  .textOverImage > input{
    display:none;
  }
  
  .textOverImage > div,.textOverImage > h2{
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    bottom:20px;
    left:4px;
    right:4px;
    border-radius:4px;
    padding:8px;
    overflow:hidden;
    opacity:0;
    transition:.3s;
  }
  
  .textOverImage:hover > h2,.textOverImage > input:checked + h2 + div{
    bottom:4px;
    opacity:1;
  }
  
  .textOverImage > input:checked + h2{
    bottom:-20px;
    opacity:0;
  }
  
  .textOverImage > h2{
    margin:0;
  }

What I have tried:

I tried to remove the "display:none;" property for h2 but it didn't work.