覆盖覆盖整个潜水 - 但保持字体为白色

Question

我试图改变div的亮度（不仅是图像亮度）。通常在div，描述和标题中有图像，主div背景颜色是白色的。我想显示悬停div onmouse悬停。想法是覆盖主div与覆盖div。但是现在我只能看到图像亮度的变化，我想要实现的是覆盖空洞并保留字体。

当我添加缩略图亮度效果时，它也会影响字体变得更暗。如何保持字体为白色。

col-sm-6，标题，缩略图类由bootstrap定义。

的代码：

     <div class="hovereffect thumbnail Staffinview1 delay1s"> 
         <img src="./images/photo.jpg"> 

         <div class="overlay"> 
         <?php echo Person_description; ?> 
         </div> 

         <div class="caption"> 
         <h3>Name Surname</h3> 
         </div> 


        </div> 
        </div> 

CSS代码：

    .thumbnail:hover { 
        transition:   all 0.5s ease-in-out; 
        -moz-transition: all 0.5s ease-in-out; 
        -webkit-transition: all 0.5s ease-in-out; 
        -o-transition:  all 0.5s ease-in-out; 
        -ms-transition:  all 0.5s ease-in-out; 
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.5); 
        } 

        .hovereffect { 
         width: 100%; 
         height: 100%; 
         float: left; 
         overflow: hidden; 
         position: relative; 
         text-align: center; 
         cursor: default; 
        } 

        .hovereffect .overlay { 
         position: absolute; 
         overflow: hidden; 
         width: 80%; 
         height: 80%; 
         left: 10%; 
         top: 10%; 
         border-bottom: 1px solid #FFF; 
         border-top: 1px solid #FFF; 
         -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; 
         transition: opacity 0.35s, transform 0.35s; 
         -webkit-transform: scale(0,1); 
         -ms-transform: scale(0,1); 
         transform: scale(0,1); 
         color: #fff; 
        } 

        .hovereffect:hover .overlay { 
         opacity: 1; 
         filter: alpha(opacity=100); 
         -webkit-transform: scale(1); 
         -ms-transform: scale(1); 
         transform: scale(1); 

        } 


        .hovereffect img { 
         display: block; 
         position: relative; 
         -webkit-transition: all 0.35s; 
         transition: all 0.35s; 
        } 

        .hovereffect:hover img{ 
         filter: url('data:image/svg+xml;charset=utf-8,<svg       xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" />                  </feComponentTransfer></filter></svg>#filter'); 
         filter: brightness(0.3); 
         -webkit-filter: brightness(0.3); 
        } 

Answer 1

我相信你正在努力实现一个面具 可以使用z-index财产和postion:absolute为覆盖DIV

css规则

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0%; 
    z-index: 0; 
    transition: all 0.5s; 
} 
.overlay:hover { 
    z-index: 1; 
    background: rgb(173, 173, 173); 
    opacity: 0.5; 
} 

摘录如下

.thumbnail:hover { 
 
    transition: all 0.5s ease - in -out; 
 
    - moz - transition: all 0.5s ease - in -out; 
 
    - webkit - transition: all 0.5s ease - in -out; 
 
    - o - transition: all 0.5s ease - in -out; 
 
    - ms - transition: all 0.5s ease - in -out; 
 
    box - shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.5); 
 
} 
 
.hovereffect { 
 
    width: 100 %; 
 
    height: 100 %; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text - align: center; 
 
    cursor: default; 
 
} 
 
.hovereffect.overlay { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    width: 80 %; 
 
    height: 80 %; 
 
    left: 10 %; 
 
    top: 10 %; 
 
    border - bottom: 1px solid# FFF; 
 
    border - top: 1px solid# FFF; 
 
    - webkit - transition: opacity 0.35s, -webkit - transform 0.35s; 
 
    transition: opacity 0.35s, transform 0.35s; 
 
    - webkit - transform: scale(0, 1); 
 
    - ms - transform: scale(0, 1); 
 
    transform: scale(0, 1); 
 
    color: #fff; 
 
} 
 
.hovereffect:hover.overlay { 
 
    opacity: 1; 
 
    filter: alpha(opacity=100); 
 
    - webkit - transform: scale(1); 
 
    - ms - transform: scale(1); 
 
    transform: scale(1); 
 
} 
 
.hovereffect img { 
 
    display: block; 
 
    position: relative; 
 
    - webkit - transition: all 0.35s; 
 
    transition: all 0.35s; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0%; 
 
    z-index: 0; 
 
    transition: all 0.5s; 
 
} 
 
.overlay:hover { 
 
    z-index: 1; 
 
    background: rgb(173, 173, 173); 
 
    opacity: 0.5; 
 
}

<div class="hovereffect thumbnail Staffinview1 delay1s"> 
 
    <img src="./images/photo.jpg"> 
 

 
    <div class="overlay"> 
 
    <?php echo Person_description; ?> 
 
    </div> 
 

 
    <div class="caption"> 
 
    <h3>Name Surname</h3> 
 
    </div> 
 

 

 
</div>