Tod Lazarov Tod Lazarov - 2 years ago 116
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 Source

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/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download