如何在使用CSS懸停時創建此透明圖像疊加？

Question

我正在尋找建議，為我的圖像懸停重現（ 見圖 ）效果。 我的問題是我的圖像很流暢，而且我還沒有真正找到關於該主題的任何好的教程以及疊加層。

我假設我必須創建一個透明的png（白色區域+圓圈），它在懸停時覆蓋圖像，然后文本覆蓋了那個？ 所有這些都需要根據圖像本身進行相應的調整。 此外，頂部邊框不是圖像的一部分，它是用CSS生成的，我不希望在可能的情況下覆蓋它。

任何人都可以指出我正確的方向，或者提供更好的實施建議？ 我很失落。

先感謝您。 :)

Answer 1

如果圖像將包含在具有已定義寬度的div中，則可以將包含div的絕對定位div添加到將用作疊加的div中。 假設此片段並且疊加層的不透明度設置為零

<div class="picholder">
    <img class="fancypics" src=http://placehold.it/500x650></img>
    <div class="overlay"><p class="text_box">Hello World!</p></div>
</div>

懸停效果的CSS將是

.picholder:hover .overlay{opacity:1;}
.picholder:hover .fancypics{opacity:0.7;}

這應該會產生懸停效果，我相信你會這樣做。 以下css應該將疊加和其他一些東西居中。 有關垂直和水平居中div的更多信息，請參閱此處

.overlay {
  bottom: 0;left: 0; top: 0; right: 0;
  height: 150px;
  width: 150px;
  margin: auto;
  position: absolute;
  background-color:#3f3f3f;
  border-radius: 50%;
  opacity:0;
}
.fancypics{width:100%;}
.text_box{
  color:white;
  weight:bold;
  font-size:2em;
  padding:10px;
  padding-bottom:50%;
  text-align:center;
}

當然還有小提琴

Answer 2

只需使用背景色設置透明色：

在這里演示

HTML

<div class="overlay">
    <div>Hello</div>
    <span>January 16. 2014</span>
</div>

CSS

.overlay {
    position:relative;
    width:200px;
    height:200px;
    border-radius:50%;
}
.overlay:hover {
    background:rgba(0,0,0,0.5);
}
.overlay > div {
    position:absolute;
    color:#fff;
    font:50px sans-serif;
    width:100%;
    top:33%;
    text-align:center;
}
.overlay > span {
    position:absolute;
    color:#fff;
    font:12px sans-serif;
    width:100%;
    top:67%;
    text-align:center;
}

可以使用邊框底部或單線圖像來實現上部文本邊框處的點畫線，並將其作為div的背景附加。

希望這可以幫助。