Question

我试图在图像上显示叠加层。但我无法弄清楚如何将this image悬停在现有的上方。我尝试改变z-index，位置但是叠加层没有出现。我是CSS的新手，所以请尽量帮我解决这个问题。

HTML：

<section class="home-item">
  <article class="home-item" data-category="RS">
    <div class="box">
      <div class="overlay">
        <a href="#">
          <span class="boximg" id="home">
            <img width="403px" height="270" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg"/>
          </span>
        </a>
      </div>
      <br>      
      <p id="caption">St. Ruperts Residence</p>
    </div>
  </article>
</section>

CSS：

.box {
  max-width: 403px;
  color: #000 !important;
  position:relative;
  padding:0;
  margin-bottom:0px;
}

.box > a
.box span,
.box img {
  display:block;
}

#caption {
  width: 403px;
  font-size: 15px;
  text-decoration: none;
  margin: -15px 0 40px 5px !important;
  font-weight: 600;
  font-family:Roboto !important;

}

.boximg {
  width: auto;
  max-width: 100%;
}

.box:hover {
  width: auto;
  max-width: 450px;
  color: #fff !important;
  z-index:2;
  background-color:#000;
}

.home-item{
  width:403px;
}

.home-item:hover .overlay{
  background-image:url('https://www.ixds.com/system/files/media-images/pre-work-talk-polygone-012x_0.png');
  position:relative;
  z-index:9999999999999999999;
  display:block;
}

请查看https://jsfiddle.net/6vrcv9kk/1/

谢谢堆！

Answer 1

你可以通过html制作..有一些错误的html标签，所以我也纠正了结构。

＆＃13;

.box {
  max-width: 403px;
  color: #000 !important;
  position:relative;
  padding:0;
  margin-bottom:0px;
}

.box > a
.box span,
.box img {
 display:block;
}

#caption {
     width: 403px;
    font-size: 15px;
    text-decoration: none;
    margin: -15px 0 40px 5px !important;
    font-weight: 600;
    font-family:Roboto !important;
 
}
.overlay .hover {
  position: absolute;
  top: 0;
  left: 0;
}
.boximg {
  /* width: auto;
  max-width: 100%; */
  display: block;
  height: 270px;
}

.box:hover img {
  display: none;
  height: 270px;
  object-fit: cover;
}
.box:hover .hover {
  display: block;
}

.home-item{
  width:403px;
}

＆＃13;

<section class="home-list">
    <article class="home-item">
        <div class="box">
            <div class="overlay">
                <a href="#">
                    <span class="boximg" id="home">
                        <img width="403px" height="270" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg" />
                        <img class="hover" width="403px" height="270" src="https://www.ixds.com/system/files/media-images/pre-work-talk-polygone-012x_0.png" />
                    </span>
                </a>
            </div>
            <br>

            <p id="caption">St. Ruperts Residence</p>
        </div>
    </article>
</section>

＆＃13;

Answer 2

试试这个，我希望它会对你有所帮助：

<section class="home-item">
  <article class="home-item" data-category="RS">
    <div class="box" >
  <div class="overlay">
  <a href="#">
    <span class="boximg" id="home"><img width="403px" height="270" src="https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg" /></span></a>
   </div>
    <br>

  <p id="caption">St. Ruperts Residence</p>
</article>
<style>
.box {
  max-width: 403px;
  color: #000 !important;
  position:relative;
  padding:0;
  margin-bottom:0px;
}

.box > a
.box span,
.box img {
 display:block;
}

#caption {
     width: 403px;
    font-size: 15px;
    text-decoration: none;
    margin: -15px 0 40px 5px !important;
    font-weight: 600;
    font-family:Roboto !important;

}

.boximg {
  width: auto;
  max-width: 100%;
}

.box:hover {
  width: auto;
  max-width: 450px;
  color: #fff !important;
  z-index:2;
  background-color:#000;
  opacity: 0.3;
}

.home-item{
  width:403px;
  opacity: 1;
}

/*.home-item:hover .overlay{
  background-image:url('https://www.ixds.com/system/files/media-images/pre-work-talk-polygone-012x_0.png');
  position:relative;
  z-index:9999999999999999999;
display:block;
}*/
</style>

悬停时的图像叠加

2 个答案: