show an element that's not a child of the anchor with pure css

tenchi

New Member
I want to trigger the element to display the hidden elements on hover HTML \[code\]<div class="contents"> <aside> <section class="tumb"> <a class="placeHoldTumb" href="http://stackoverflow.com/questions/14552359/#"><img src="http://placehold.it/100x100"> <a class="placeHoldTumb" href="http://stackoverflow.com/questions/14552359/#"><img src="http://placehold.it/100x100"> </section> </aside> <div class="hidden"> <a href="http://stackoverflow.com/questions/14552359/#" class="one" ><img src="http://placehold.it/1000x1000/bada55" width="500px" ></a> <a href="http://stackoverflow.com/questions/14552359/#" class="two" ><img src="http://placehold.it/1000x1000/bada55" width="500px" ></a> </div> <a href="http://stackoverflow.com/questions/14552359/#" class="background" ><img src="http://placehold.it/1000x1000/000000/bada55" width="500px" /></a></div><!-- end contents -->\[/code\]CSS\[code\]aside { z-index: 100; background: rgba(0, 182, 173, 0.9); width: 230px; position: absolute; }aside .tumb img { margin: 5px; position: relative; }.contents img { position: absolute; }.hidden img { opacity: 0; }.tumb a:hover ~ .hidden img { opacity: 1; filter:alpha(opacity=100); /*For IE8*/ }\[/code\]demo here: http://codepen.io/mvaneijgen/pen/ELBAg
 
Back
Top