div를 밝게하는 동안 div를 밝게/빛나게 만듭니다.

Question

div 내에있는 이미지를 밝게 만들지 만 div 만 가져 가면 div의 이미지 만 변경됩니다. 내 코드가 조금 엉성한 수 있지만 여기에, 감사합니다.

#textimg{ 
 
    
 
    background-image: url('images/stock1.jpg'); 
 
    height:100%; 
 
    width:100%; 
 
    min-height: 340px; 
 
    max-width: 400px; 
 
    
 
} 
 

 

 

 
#textimg:hover{ 
 

 
    -webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3)); 
 
    -webkit-transition: all 0.3s linear; 
 
    -o-transition: all 0.3s linear; 
 
    transition: all 0.3s linear; 
 
} 
 

 

 

 
#textimg img:hover{ 
 

 
    -webkit-filter: brightness(140%); 
 
    -webkit-transition: all 0.3s linear; 
 
    -o-transition: all 0.3s linear; 
 
    transition: all 0.3s linear; 
 

 
}

<div id="textimg"> 
 
     <img src="images/sometext.png"> 
 
</div>

Answer 1

에 클래스를 추가

사용 :

#textimage:hover img { 
    -webkit-filter: brightness(140%); 
    -webkit-transition: all 0.3s linear; 
    -o-transition: all 0.3s linear; 
    transition: all 0.3s linear; 
} 

Answer 2

당신이 찾고있는 용어는 불투명하다. 호버 위에 불투명도 값을 변경하면 작동합니다. 참조에 대한 예제가있다

: -

.container:hover .image { 
    opacity: 0.3; 
} 
.container:hover .middle { 
    opacity: 1; 
} 

변화

필요에 따라 사업부

Answer 3

봅니다 이미지

body,html{ 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.container{ 
 
    width: 100%; 
 
    height: 90%; 
 
    
 
} 
 
.img1{ 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: opacity 2s; 
 
} 
 
.img1:hover{ 
 
    opacity: 0.5; 
 
}

<div class="container"> 
 
    <img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="img1" /> 
 
</div>