CODEWITHSUNDEEP
htmlcss
Tod Lazarov
Tod Lazarov

Reputation: 91

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

Upvotes: 0

Views: 58

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78550

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/

Upvotes: 5

Related Questions