用CSS过渡淡入灯箱

我正试图使这个灯箱淡入淡出，理想情况下，如果可能的话，我想用CSS来做。有什么建议吗?

生活例子

<section id="about">
    <div class="wrapper">
        <button id="hide" class="close">close</button>
            <h1>About</h1>
    </div>
</section>
<a id="show" href="#about" class="scroll">About</a>

JS

// Simple show and hide button
$("#hide").click(function(){
    $("#about").hide();
});
$("#show").click(function(){
    $("#about").show();
});