Tod Lazarov Tod Lazarov - 5 months ago 3x
HTML Question

:checked hack not working

I am trying to create an effect that allows the user to click on the item image, which will result in the image popping up in the middle of the page and increasing in size. For some reason it doesnt allow me click it.

Here is the full jsfiddle:

input[type="checkbox"] {
display: none;

input[type="checkbox"]:checked + img {
position: absolute;
top: 100px;
left: 50%;
width: 400px;
height: auto;
margin: 0 0 0 -200px;


Wrong selector. You should be using input[type="checkbox"]:checked + .img-container img for your selector.

See Adjacent Sibling Selectors
and Descendant selectors