私はこれらを多くのサイトで見てきました。基本的に、私はポートフォリオを作成しており、プロジェクトのスクリーンショットを示す多数の div (グリッド形式の正方形) があります。マウスで各プロジェクトにカーソルを合わせると、以前は非表示になっていた div がスライドして、その特定のプロジェクトに関する特定の情報が表示されるようにしたいと考えています。
基本的に、私はこのような単純なものを探しています: http://iamyuna.com/
各形状 (つまり、プロジェクト) にカーソルを合わせると、すぐに「展開」して、その下にある別の画像が表示されることに注意してください。これは悪い例かもしれません。別の画像の代わりに説明を表示したいからです。ただし、隠されたコンテンツを表示するために展開するのがいかに速いかが気に入っています.
以下は、私のhtmlがどのようにレイアウトされているかです。自分の仕事に似たようなものを実装することは可能でしょうか? 皆さんが私がこれを始めるのを手伝ってくれたり、最初にキーワードを提案したりできるなら (私は何時間もチュートリアルを探していましたが、見つかりません)、本当に感謝しています. ありがとうございました。
<article class="project" data-id="248">
<div class="project-mask">
<div class="thumbnail">
<img src="image.jpg">
<div class="description">
<h2>Title</h2>
<p>Description</p>
</div>
</div>
</div>
</article>