Html 在图像上覆盖三个不同的图像，仅覆盖第一个图像

我有一个网站有一个公文包图像，当图像悬停在上面时，会出现一个覆盖图

我以这样的方式实现了这一点，这意味着当代码相乘（对于3个不同的投资组合项目）时，覆盖始终只覆盖在第一个图像上，而不是覆盖在每个不同的图像上

有人能帮忙吗

实时链接是

用于生成图像覆盖的代码：

CSS:

HTML:

要覆盖每个不同的滚动图像，您必须对HTML和CSS文件进行一些更改。在HTML文件中搜索并放入每个元素

.image { 
    position: relative; 
    height: 240px;
}
.hoverimage { 
    position: absolute; 
    top: 5px; 
    left: 25px; 
    display: none;
}
.image:hover .hoverimage { 
    display: block; 
}​

<img src="images/portfolio_image_1.png" class="captionme" 
title="I am the only son" alt="Porfolio detail" />

<img src="images/portfolio_image_1.png" class="captionme" 
title="I am the only son" alt="Porfolio detail" />

<img src="images/portfolio_image_1.png" class="captionme" 
title="I am the only son" alt="Porfolio detail" />

<div class="image">
  <div class="imgpost">
    <img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
    <div class="thecaption">I am the only son</div>
    <img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
  <div class="imgpost">
    <img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
    <div class="thecaption">I am the only son</div>
    <img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
  <div class="imgpost">
    <img src="images/portfolio_image_1.png" class="captionme" title="I am the only son" alt="Porfolio detail">
    <div class="thecaption">I am the only son</div>
    <img class="hoverimage" src="images/portfolio_overlay.png" alt="">
</div>
</div>

.hoverimage { position: absolute; top: 1px; left: 1px; display: none;}

.imgpost .hoverimage {
border: none;
background: none;
}

.imgpost:hover .hoverimage {
display: block;
}

.image:hover .hoverimage { display: block; }​