CSS 转换隐藏其上方的 float 元素

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

希望这能解决您的问题。我在 .blog-icon 中添加了一个 z-index。

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