The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › [Solved] show/hide overlapping images with click event
i have 2 overlapping imgs (2 moons) only the first is visible, the second is display:none. Is it possible on click to make the first invisible and the second visible using only css? here is the example:
display:none
http://cdpn.io/qvzAw
the images are luna1 & luna2, i’m trying to make luna2 visible and luna 1 invisible whenever** luna1** is clicked
Your best bet would be to just use Javascript, but you could do something like this:
HTML:
<div> <a class="a"href="#">Hey</a> <a class="b" href="#">Howdy</a> </div>
CSS:
div {position:relative;} .a{position:absolute;} .b{position:absolute; visibility:hidden;} .a:active {visibility:hidden;} .a:active + .b {visibility:visible;}
Although I’m not sure if that will produce the results you want, you’d have to hold the mouse button down.
@Alex
thank u for your answer Alex, I couldn’t make it work but I’ll have it in mind next time I want something like this :)