Наложение охватывает все погружения - но сохраняйте шрифты белые

Question

Я пытаюсь изменить яркость div (а не только яркость изображения). В общем, есть изображение в div, описании и заголовке, основной цвет фона div - белый. Я хочу показать ovarlay div onmouse hover. Идея состоит в том, чтобы покрыть основной div с наложением div. Но теперь я получаю только изменение яркости изображения, чего хочу достичь, чтобы покрыть отверстие div и сохранить шрифты.

Когда я добавляю эффект яркости эскиза, он также влияет на шрифты, становясь темнее. как это сделать, сохраняя шрифты белыми.

col-sm-6, caption, thumbnail classes определяются бутстрапом.

Код:

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