Tod Lazarov Tod Lazarov - 7 months ago 17
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: https://jsfiddle.net/gr282dxp/

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;
}

Answer

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

See Adjacent Sibling Selectors
and Descendant selectors

https://jsfiddle.net/jmarikle/bwqbv9mn/

Comments