Question

我正在制作一个简单的博客文章框，顶部是am image。当鼠标盘旋在盒子上时，图像会缩放到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>

CSS转换隐藏了浮动元素

1 个答案: