When I hover my label element it triggers hover of different element

It seems I'm facing a bug regarding labels.

I'm trying to make an image hover overlay effect with a label as trigger to open a lightbox. Check my code here in Codepen <--click

The fullscreen button (actually a < label > element) is the one that looks like an "X" at the upper right corner of the cat image. The problem is, when I click it to change my image to fullscreen, when I hover the fullscreen button (which now moved to the upper right of your screen), it is triggering the hover effect for my .jcontainer class! (which is the fullscreen button's parent)

PS:
I added some codes below so that you will see the hover effects in action as you hover the fullscreen button after you clicked it.

#jlightbox-checkbox:checked ~ .jimage {visibility:hidden;}
#jlightbox-checkbox:checked ~ .joverlay {visibility:hidden;}

Remove the visibility:hidden on them if you want to see the image going fullscreen (or half screen).

from Recent Questions - Stack Overflow http://ift.tt/29QOdRQ
via https://ifttt.com/ IFTTT