覆蓋覆蓋整個潛水 - 但保持字體爲白色

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>