Click here to Skip to main content
15,040,212 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
Posted
Updated 23-Apr-21 6:40am

Quote:
CSS
.textOverImage > div,.textOverImage > h2{
    ...
    opacity:0;
    ...
}
Remove the opacity:0; line, which makes your h2 element completely transparent.
   
Assign a z-index[^] style to your elements. You can then completely control which is on top.


   
Comments
Rabiî Ab 23-Apr-21 9:02am
   
Can you please explain more? I am novice in css. But anyway, I tried z-index. The code simply didn't work when I added z-index.
W Balboos, GHB 23-Apr-21 9:11am
   
You say you tried it but I don't see it in your CSS . How can I determine what's wrong if it's not there? The link I included explains z-index. Make yourself a test page and experiment with it until you understand.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900