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>