私はこの WordPress テーマを見てきました: http://themes.thunderbuddies4life.com/?theme=longwave_wp
タイルをホバーすると、マウスが入った端から半透明の div がタイルの上をスライドするように見えます。これには単一の div を使用できると思いますが、ページのソースを見てどのように達成されるかはわかりません。
私は html と css はかなり得意ですが、私の jQuery は非常に基本的なものです。私はこれが少しオープンエンドであることを知っていますが、関連するテクニックの簡単な説明が役に立ちます.
編集：ページソースを掘り下げずに考えてみると、これがアプローチがうまくいくと私が思う方法です：
- 各タイルには、タイトルなどが付いた独自の半透明オーバーレイ子 div があります。
- 各オーバーレイ div は、タイル div の外側のどこかに配置されます。タイルには
overflow:hidden - マウスが div をホバリングすると、jQuery を使用して、マウスがどちら側に入ったかを調べます (どのように?)
- 次に、CSS クラスをオーバーレイ div に適用します: top、bottom、leftまたはrightのいずれかです。CSS が起動して、オーバーレイ div をタイル div の対応する端のすぐ外側に即座に配置します。
- 次に、jQuery はオーバーレイ div をアニメーションでオフセットして、タイル上の位置に移動します。
タイルは動的にサイズ変更されるため、タイル サイズに応じてオフセット量を再定義するには jQuery が必要になります。