ポップダウン画像記述ボックス

Question

私は私の会社のウェブサイト上で働いていると私は、私はここに、これと同じチームのバイオページを作成したいことを知っている：https://arch.iit.edu/people

私が説明ボックスを再作成しようとしていますクリックすると画像の下に表示されます。

私はこれを行うのに役立つjavascript /コーディングを見つけようとしています。しかし、私は本当に私が実際に探しているものを私に提供していない、ライトボックスの説明ボックスの下にいくつかの検索を行ったようにどこから始めなければならないのか分からない。

これを達成するための見え方やこれを達成する方法について、私は助けを求めることができますか？

ありがとうございました。

Answer 1

私はあなたのウェブサイトに正確に何を見つけたいと思うかと思います。 jQueryスライドメソッドは、要素を上下にスライドします。 w3schools.com

それはあなたの

よろしく、 エイドリアン

Answer 2

を助けている場合、非常に簡単になりますが、あなただけの初めを使用することができることを教えてください： に、これを見てください。

$('.holder').on('click',function(){ 
 
    $(this).find('.description').fadeIn(); 
 
});

.description { 
 
    display:none; 
 
    text-align:center; 
 
    background-color: #FFF8DC; 
 
    padding: 6px; 
 
    font-size: 14px; 
 
} 
 

 
.holder { 
 
    width:140px; 
 
    padding:6px; 
 
    border:solid 1px #311; 
 
    background-color: #000; 
 
} 
 

 
.holder img { 
 
    width:100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='holder'> 
 
    <img src='http://bjstlh.com/data/wallpapers/65/WDF_1103100.jpg' width='120' height='120'> 
 
    <div class='description'> 
 
    Lorem ipsum dolor sit amet 
 
    </div> 
 
</div>