0

キャプションを適用したいインライン画像があります。このキャプションにわずかなオーバーレイ色を付けて、画像の幅/高さを 100% 埋めたいと思います。

私の画像はレスポンシブ グリッドに表示されているため、画像のサイズは流動的です。したがって、「height: 261px; line-height:261px」のような単純な CSS を適用することはできません。

このホバリングで画像の高さの 100% を埋めるのに苦労しています。また、画像のサイズが流動的であるため、画像の垂直方向の中心にも問題があります。

これまでの私のCSSは次のとおりです。

.ctp-hover img{
    width:100%;
    height:auto;
}

a.ctp-hover {
    display: inline-block;
    position: relative;
}

.hover-caption {
    text-align:center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: red;
    background:rgba(199,74,78,0.75);
    color: white;
    display: none;

}

ここに JSFiddle の例を添付しました: http://jsfiddle.net/5X7ub/16/

4

2 に答える 2

1

私は純粋なcssソリューションに行きました.jsは必要ありません. 私が使用した CSS トランジションは、完全にクロス ブラウザーではありませんが、適切に劣化するはずです。劣ったブラウザー (IE を参照) を使用する場合は、ブラウジング エクスペリエンスが劣ることが予想されます。

私のコードは次のようになります (もう少し読みやすくするために、HTML を少し単純化しました)。

<a class="hover-me">
    <span class="caption">VIEW</span>
    <img src="http://lorempixel.com/261/261/"/>
</a>

.hover-me {
    position: relative;
    width: 250px;
    display: inline-block;
}

.hover-me img{
    width:100%;
    height:auto;
    display: block;
}

.hover-me:after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    background: rgba(255,0,0,.5);
    transition: all .5s ease;
    opacity: 0;
}
.hover-me .caption {
    display: block;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    margin-top: -10px;
    text-align: center;
    transition: all .5s ease;
    opacity: 0;
    z-index: 2;
    color: #fff;
    line-height: 20px;    
}
.hover-me:hover:after , .hover-me:hover .caption {
    opacity: 1;
}

お気づきかもしれませんが:
- キャプションとオーバーレイは不透明度を使用して隠され、css で変更できるようになっています。
- ストレッチは、bottom: 0;またはを追加することによって行われheight: 100%;
ます - テキストは、上部を 50% に設定し、margin-top をテキストの高さの半分に設定することにより、垂直方向に中央揃えされます
- オーバーレイは:after、リンクの で実現されます。今は完全な高さではありません。これが z-index がある理由でもあります。そうしないと、オーバーレイがキャプションの上に表示されます。

コードをprefixrのようなものを介して実行することを忘れないでください（または、持っている場合はless / sass mixinを使用して）、最大のクロスブラウザサポートを取得します（主に不透明度とトランジション用）

コードが明確であることを願っています。そうでない場合は、お気軽にお問い合わせください。また、実演するためにフィドルを更新しました：http://jsfiddle.net/5X7ub/25/

于 2013-11-06T21:17:23.670 に答える
0

問題を解決するためにフィドルを更新しました。追加するだけでした

bottom: 0
padding-top: 48%

キャプションが高さ全体をカバーし、テキストがほぼ中央に配置されるようにします。残念ながら、CSS3 の calc() がサポートされていないと、テキストを中央近くにしか配置できません。

以下も参照してください。

于 2013-11-06T20:36:24.247 に答える