<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>
.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; }
Quote:CSS .textOverImage > div,.textOverImage > h2{ ... opacity:0; ... }
.textOverImage > div,.textOverImage > h2{ ... opacity:0; ... }
opacity:0;
h2
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)