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

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

<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);
}</p>
<p>このコードでは、.image-container は画像とオーバーレイ div のラッパーとして機能します。 .after の配置により、オーバーレイが画像全体をカバーするようになりますが、条件付き表示プロパティにより、オーバーレイはホバー時にのみ表示されます。 .after div 内の背景色とコンテンツを変更することで、オーバーレイの外観をカスタマイズできます。</p>
<p><strong>カスタマイズ:</strong></p>
<p>提供されたソリューションは、基本的なテンプレートとして機能します。さらに CSS ルールを追加することで、見た目の美しさを高めることができます。たとえば、オーバーレイ内でコンテンツを垂直方向に整列させたり、アイコン スタイルを変更したり、ホバー アニメーションをよりスムーズにするためのトランジション プロパティを含めたりすることができます。</p>
<p>追加のスタイルを追加した変更例を次に示します:</p>
<pre class="brush:php;toolbar:false"><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>