CSSを使用して画像ホバー時にテキストとアイコンを含むダークオーバーレイ効果を作成する方法

CSS を使用して画像にオーバーレイ効果を作成する

この記事では、テキストを含む暗いオーバーレイの効果を実現する方法を検討します。 CSS を使用して画像の上にマウスを移動すると、アイコンが表示されます。

問題:

画像上にマウスを移動すると、カスタムの暗いオーバーレイが表示されるインタラクティブな画像ギャラリーを作成することを目的としています。提供された画像に示されている内容。課題は、さまざまな高さの画像に対して一貫した幅でこの効果を実現することにあります。

解決策:

これを実現するには、HTML と CSS の組み合わせを使用します。次のように:

HTML マークアップ:

`

<img  src="/static/imghwm/default1.png" data-src="image-url" class="lazy" alt="CSSを使用して画像ホバー時にテキストとアイコンを含むダークオーバーレイ効果を作成する方法" >
<div class="after">This is some content</div>

> ;`

CSS スタイル ルール:

<code class="css">.image-container {
    position: relative;
    width: <fixed width>;
}
.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);
}</fixed></code>

このコードでは、.image-container は画像とオーバーレイ div のラッパーとして機能します。 .after の配置により、オーバーレイが画像全体をカバーするようになりますが、条件付き表示プロパティにより、オーバーレイはホバー時にのみ表示されます。 .after div 内の背景色とコンテンツを変更することで、オーバーレイの外観をカスタマイズできます。

カスタマイズ:

提供されたソリューションは、基本的なテンプレートとして機能します。さらに CSS ルールを追加することで、見た目の美しさを高めることができます。たとえば、オーバーレイ内でコンテンツを垂直方向に整列させたり、アイコン スタイルを変更したり、ホバー アニメーションをよりスムーズにするためのトランジション プロパティを含めたりすることができます。

追加のスタイルを追加した変更例を次に示します:

<code class="css">.image-container .after .content {
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    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;
}</code>

この更新されたコードでは、オーバーレイ コンテンツが中央揃えで下部に配置されます。さらに、マウスを置くと色が変わるズーム アイコンが追加されました。これらのカスタマイズは、提供されるソリューションの柔軟性を示し、カスタマイズされた画像オーバーレイを作成できるようにします。

以上がCSSを使用して画像ホバー時にテキストとアイコンを含むダークオーバーレイ効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。