In the last blogpost , I helped to describe the CSS show and hide text posted to StackOverflow. Here I look at adding CSS for a smoother transition by modifying a transition example also on StackOverflow. /* onload css */ #show { display:none; } .wrapper { position: relative; overflow: hidden; width: 300px; height: 300px; } .answer { position: absolute; top: -10px; transition: 0.25s; opacity:0; } In the CSS that styles the HTML page when loaded we first of all hide the text that we want to show later (i.e. the hide button). We also create a wrapper for the text so that it can be invisible by first of all creating what is essentially a box and placing it outside this box, so that it doesn't appear on screen, but so that it doesn't need to be off the actual top of the page as a starting point. /* click triggered css */ #hide:target { display:none; } #hide:target + #show { display:inline; } #hide:target ~ .wrapper > .answer {
Technology tips for writers, editors, designers, illustrators, programmers and publishers, and now Retro Gamers.