悬停图像叠加

Question

I'm trying to display an overlay over an image. But I can't figure out how to make this image hover over the existing one. I tried changing z-index, position but the overlay does not show up. I'm new to CSS so, please try to help me figure this out.

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;
}

Please view https://jsfiddle.net/6vrcv9kk/1/

Thanks heaps!

Answer 1

You can make via html.. There is some error html tags so i have corrected structure also.

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

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

Answer 2

try this,I hope it will help you:

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