ホバー上にカラーオーバーレイを持つリンク内の画像

Question

リンク内でイメージを作成する必要があります。ホバー上にカラーオーバーレイがあり、その中にデッドセンターにあるテキストが含まれている必要があります。しかし、私はどのように知りません。私は画像上に単純な色のオーバーレイを作る方法を知っていますが、内部のimgでこれを行う方法は？

これはこれまでの私のコードです。ご覧のとおり、私が作りたいものではありません。誰かがこれで私を助けることができますか？

.img-overlay img { 
 
    position: relative; 
 
    } 
 
.overlay { 
 
    display: none; 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(41,42,44,0.5); 
 
} 
 
.img-overlay { 
 
    position: relative; 
 
} 
 
.img-overlay:hover .overlay { 
 
    display: block; 
 
    }

<div class="img-overlay"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <div class="overlay"> 
 
    <span>TITLE</span> 
 
    </div> 
 
</div>

それはクリック可能だとどこかにつながるように、私のイメージは、内側にする必要があります。どうすればこれを達成できますか？

Answer 1

私はコンテナinline-blockはそれはそれは内容の中心部オーバーレイコンテナにdisplay: flex; align-items: center; justify-content: center;を使用した後、一番下の空白がなくなっているので、vertical-align: topに画像を設定し、画像のサイズに合うなるだろう。

.img-overlay img { 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 

 
.overlay { 
 
    display: none; 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: rgba(41, 42, 44, 0.5); 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.img-overlay { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.img-overlay:hover .overlay { 
 
    display: flex; 
 
}

<a class="img-overlay"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <div class="overlay"> 
 
    <span>TITLE</span> 
 
    </div> 
 
</a>

またその変更をtransitionでき:hoverにopacityを切り替えることがあります。

.img-overlay img { 
 
    position: relative; 
 
    vertical-align: top; 
 
} 
 

 
.overlay { 
 
    display: flex; 
 
    position: absolute; 
 
    color: #fff; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: rgba(41, 42, 44, 0.5); 
 
    justify-content: center; 
 
    align-items: center; 
 
    opacity: 0; 
 
    transition: opacity .25s; 
 
} 
 

 
.img-overlay { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.img-overlay:hover .overlay { 
 
    opacity: 1; 
 
}

<a class="img-overlay"> 
 
    <img src="https://placehold.it/350x150"> 
 
    <div class="overlay"> 
 
    <span>TITLE</span> 
 
    </div> 
 
</a>