CSS 변환은 위에 떠 다니는 요소를 숨 깁니다.

Question

상단에 이미지가있는 간단한 블로그 게시물 상자를 만들고 있습니다. 마우스를 상자 위로 가져 가면 이미지의 크기가 1.1로 조정되고 오버플로가 숨겨집니다.

블로그 포스트 DIV는 상대적으로 설정되어 있으며 이미지 위쪽에는 아이콘이있어 이미지의 상단에는 절반, 그 위에는 아이콘이 있습니다.

문제 : 마우스가 DIV 위로 마우스를 가져 가면 이미지의 크기가 조정되지만 이미지 위에있는 아이콘 부분이 사라집니다.

축척 변환이 진행 중일 때 아이콘이 계속 표시되도록하려면 어떻게 중지합니까?

도움 주셔서 감사합니다.

HTML

<a href="#"> 
<div class="blog_slot"> 

<div class="blog_icon"> 
<img src="\adrenicon.jpg" style="width:50px; height:50px;" 

alt="adrenicon"> 
</div> 

<div class="blog_image"> 
<img src="\image.jpg" alt="xxxxx"> 
</div> 
<div class="blog_title"> 
<H2>xxx</H2> 
<H3>xxxxxxxxx</H3> 
</div> 
<p>xxxxxxxxxxxx</p> 
<p>... 
<p>Read More</p> 

</div> 
</a> 

와 CSS이 방법으로 문제가 해결

.blog_icon { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: -25px; 
    left: 0; 

} 


.blog_slot { 
    position: relative; 
    max-width:500px; 
    min-width:200px; 
    border-style: solid; 
    border-width: 5px; 
    border-color: #FFD657; 
    text-align: center; 
    } 

.blog_image 
{ 

    overflow: hidden;} 

.blog_image img { 
    width:100%; 
    max-width:450; 
    height:100%; 


    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 

} 

.blog_slot:hover .blog_image img { 

    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

Answer 1

희망. z-index을 .blog-icon에 추가했습니다.

.blog_icon { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: -25px; 
 
    left: 0; 
 
    z-index: 1; 
 
} 
 
.blog_slot { 
 
    position: relative; 
 
    max-width:500px; 
 
    min-width:200px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    border-color: #FFD657; 
 
    text-align: center; 
 
} 
 

 
.blog_image { 
 
    overflow: hidden; 
 
} 
 

 
.blog_image img { 
 
    width:100%; 
 
    max-width:450; 
 
    height:100%; 
 

 
    -moz-transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    transition: all 0.5s; 
 

 
} 
 

 
.blog_slot:hover .blog_image img { 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
}

<a href="#"> 
 
<div class="blog_slot"> 
 

 
<div class="blog_icon"> 
 
<img src="https://unsplash.it/50/60/?random" style="width:50px; height:50px;" alt="adrenicon"> 
 
</div> 
 

 
<div class="blog_image"> 
 
<img src="https://unsplash.it/800/1200/?random" alt="xxxxx"> 
 
</div> 
 
<div class="blog_title"> 
 
<H2>xxx</H2> 
 
<H3>xxxxxxxxx</H3> 
 
</div> 
 
<p>xxxxxxxxxxxx</p> 
 
<p>... 
 
<p>Read More</p> 
 

 
</div> 
 
</a>