javascript - リンクごとに異なるテキストを表示する

Question

これで、写真をクリックすると、ターゲット div ギャラリーが表示されます。ターゲット div をイーズイン、イーズアウト、スライド効果などの効果で表示して、より魅力的に見えるようにしたいです。最初は、ターゲット div ギャラリーはcss のように表示されません。ギャラリーには display:none があります。これについてもトランジション プロパティを試しましたが、うまくいきませんでした。

<div>   
    <ul id="nav">
        <li><a href="#main">Home</a></li>
        <li id="gallary"><a href="#gallery">Photos</a></li>
    </ul>
 </div>

 <div id="gallery">
     <h3 style="font-family:'Comic Sans MS';color:white;font-size:25px;text-align:center;font-weight:bold;">GALLARY</h3>
     <div id="gallary_images"><a href="slide1.jpg" data-lightbox="roadtrip"><img src="slide1.jpg"/></a></div>
     <div id="gallary_images"><a href="slide3.jpg" data-lightbox="roadtrip"><img src="slide3.jpg"/></a></div>
     <div id="gallary_images"><a href="slide4.jpg" data-lightbox="roadtrip"><img src="slide4.jpg"/></a></div>
     <div id="gallary_images"><a href="slide5.jpg" data-lightbox="roadtrip"><img src="slide5.jpg"/></a></div>
     <div id="gallary_images"><a href="slide1.jpg" data-lightbox="roadtrip"><img src="slide1.jpg"/></a></div>
     <div id="gallary_images"><a href="slide5.jpg" data-lightbox="roadtrip"><img src="slide5.jpg"/></a></div>
</div>

このためのCSSは

#gallery:target
{
    display:block;
    }
#gallery
{
    border:solid black thin;
    display:none;
    position:absolute;
    }