使用img覆蓋懸停？

在懸停時創建與img疊加的最佳方式是什麼？我在項目中使用框架基礎。我試過這個代碼，但它並不能很好地工作：使用img覆蓋懸停？

<div class="other_services"> 
    <div class="small-12 medium-3 large-3 columns"> 
     <div class="image-box"> 
      <img src="http://s8.postimg.org/ithka8iv9/cleaning_of_shopping_centers.png" alt=""> 
     </div> 
     <div>some text here</div> 
     <img src="http://s22.postimg.org/u877u6rlp/icon_shop.png" alt="" class="icon-hidden"> 
    </div> 
</div>

.other_services { 
    font-size: 14px; 
    font-family: 'Open Sans', sans-serif; 
} 
.other_services img { 
    max-height: 117px; 
    max-width:200px; 
} 
.image-box { 
    position:relative; 

} 
.image-box img { 
    width:100%; 
    vertical-align:top; 
} 
.image-box:after { 
    content:'\A'; 
    position:absolute; 
    width:24%; height:100%; 
    top:0; left:0; 
    background:rgba(0,0,0,0.6); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image-box:hover:after { 
    opacity:1; 
} 
.image-box:hover + .icon-hidden{ 
    display: block; 
} 
.other_services .icon-hidden { 
    position: absolute; 
    z-index: 200; 
    max-width: 133px; 
    margin: -40% 0 0 24%; 
    display: none; 
}

有什麼想法？

來源

2015-10-20 Maximus Dredoff

「最好的方式」的問題是基於意見的，因此對於SO來說是不合適的。 –

正在尋找類似的東西[** JSFiddle **]（http://jsfiddle.net/vivekkupadhyay/fLsu5jzk/1） PS：它雖然不是最好的方式;） – vivekkupadhyay

「最好的方式」是基於意見的。看，我不知道這是否是最好的方式，但這肯定會是一個好方法！

我還根據flexbox屬性製作了centered類，以便在水平和垂直方向上對齊文本和圖標。

我也object-fit: cover;這確保它總是按比例顯示圖像。我很確定你是否會像這樣使用它，它會完美的工作！

.other_services { 
 
    font-size: 14px; 
 
    font-family:'Open Sans', sans-serif; 
 
    color:#fff; 
 
} 
 

 
.img-wrapper { 
 
    position: relative; 
 
} 
 

 
    .img-wrapper > img { 
 
     width: 100%; 
 
     object-fit: cover; 
 
    } 
 

 
    .img-wrapper-overlay { 
 
     position: absolute; 
 
     top: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     right: 0; 
 
     background-color: rgba(0,0,0,0.6); 
 
     transition: all 0.5s; 
 
     -webkit-transition: all 0.5s; 
 
     opacity: 0; 
 
    } 
 

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

 
.centered { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
}

<div class="other_services"> 
 
    <div class="small-12 medium-3 large-3 columns"> 
 
     <div class="img-wrapper"> 
 
      <img src="http://s8.postimg.org/ithka8iv9/cleaning_of_shopping_centers.png"> 
 
      <div class="img-wrapper-overlay centered"> 
 
       <p>Some text</p> 
 
       <img src="http://s22.postimg.org/u877u6rlp/icon_shop.png"/> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

在我的例子中圖像被填充到頁面的100%，但是當添加到您已經基金會基於代碼，這將導致33.3%寬的圖像（在桌面上），這在你的情況下會是完美的。

來源

2015-10-20 12:27:05

是的）這絕對是非常好的方式）謝謝求助 –

使用img覆蓋懸停？

回答

相關問題