Gallery with CSS

Lounge
1

Hey :slight_smile:

I use Joplin to keep track of my DIY projects, too. And I created a little CSS piece to create a Gallery-Like Feature.

I want to use a thumbnail, to have a better view of the To-Dos and text. The images are only important if I want to re-remember an older project.

Right now I use a simple hover to show the full sized image. But this doesn't work very smooth.

Does the community here has a better idea?

img.gallery { 
  border: 1px solid #00A3A3; 
  margin-right: 10px;
}

img.gallery:hover {
  position: absolute; 
  width: 100%;
  left: 0; 
  cursor: pointer;
  z-index: 999;
}

<img src=":/attachmentID" class="gallery" width="57px"/>
<img src=":/attachmentID" class="gallery" width="70px"/>

PS: I tried with a simple CSS Lightbox, using Target and/or checkboxen as solutions, but the images won't open.