使用img覆盖悬停？

Question

在悬停时创建与img叠加的最佳方式是什么？我在项目中使用框架基础。我试过这个代码，但它并不能很好地工作：

这里是我的代码：http://jsfiddle.net/fLsu5jzk/

<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; 
} 

有什么想法？

Answer 1

“最好的方式”是基于意见的。看，我不知道这是否是最好的方式，但这肯定会是一个好方法！

我还根据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%宽的图像（在桌面上），这在你的情况下会是完美的。