오버레이는 전체 다이빙을 다루지 만 글꼴은 흰색으로 유지합니다.

Question

div의 밝기를 변경하려고합니다 (이미지 밝기 만 변경하지 않음). 일반적으로 div, 설명 및 캡션에 이미지가 있으며 기본 div 배경색은 흰색입니다. 나는 ovarlay div onmouse hover를 보여주고 싶습니다. 아이디어는 오버레이 div로 메인 div를 덮는 것입니다. 하지만 이제는 이미지의 밝기 만 변경되었으므로 구멍 div를 덮고 글꼴을 그대로 유지해야합니다.

미리보기 이미지 밝기 효과를 추가하면 글꼴이 더 어둡게 영향을줍니다. 글꼴을 흰색으로 유지하는 방법.

col-sm-6 캡션 썸네일 클래스는 부트 스트랩에 의해 정의됩니다.

의 코드 :

     <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

난 당신이 그 오버레이의 div z-index 재산과 postion:absolute을 사용할 수 있습니다 마스크를 달성하기 위해 노력하고있다 생각

css 규칙

,451,515,

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

예