高さは異なるが幅が一定の CSS 画像オーバーレイを作成するにはどうすればよいですか?

画像の CSS オーバーレイ: 総合ガイド

はじめに

画像オーバーレイの作成はWeb デザインにおける一般的なタスク。画像上にテキスト、アイコン、その他の情報を追加して、視覚的に魅力的で有益な効果を作成できます。この記事では、CSS を使用してこれを実現する方法を検討します。特に、一貫した幅を維持しながら画像の高さが異なる場合に焦点を当てます。

画像オーバーレイの作成

この効果を実現するには、div コンテナを使用して画像とオーバーレイ コンテンツを保持します。次の CSS ルールによりオーバーレイが作成されます:

.image-container {
    position: relative;
    width: 200px;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML 構造

HTML 構造には画像とオーバーレイ コンテンツが含まれます:

<div class="image-container">
    <img src="image.jpg">
    <div class="after">This is some content</div>
</div>

オーバーレイの強化

オーバーレイの外観を改善するために、CSS スタイルを追加できます。例:

.image-container .after .content {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    padding: 5px;
}

これにより、オーバーレイ コンテンツが下部に垂直に配置されます。

カスタマイズされたデモ

ここでは、追加機能を備えたより複雑なデモを示します。アイコンやテキストなどのスタイル:

.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    display: block;
}

.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}

.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}

.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}

.image-container .after .zoom:hover {
    color: #FFF;
}

<div class="image-container">
    <img src="image.jpg">
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom"><i class="fa fa-search"></i></span>
    </div>
</div>

この更新されたデモでは、アニメーション化されたズーム アイコンがオーバーレイに追加され、視覚的にさらに興味深いものになります。

以上が高さは異なるが幅が一定の CSS 画像オーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。