Question

我有一个包含投资组合图片的网站，当图片悬停时，会出现一个叠加层。

我已经实现了这一点，这意味着当代码成倍增加时（对于3个不同的投资组合项），覆盖总是只在第一个图像上，而不是在每个不同的图像被翻转。

有人可以帮忙吗？

实时链接为here

用于制作图像叠加的代码：

CSS：

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

HTML：

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

Answer 1

要覆盖正在翻转的每个不同图像，您必须在HTML和CSS文件中进行一些更改。在您的HTML文件中搜索＆lt; div class =“image”＆gt;并把每个＆lt; img class =“hoverimage”＆gt;里面的元素＆lt; div class =“”imgpost“＆gt;：



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

然后在你的CSS中添加/修改以下样式：

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

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

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

然后删除此样式： .hoverimage { position: absolute; top: 1px; left: 1px; display: none;} .imgpost .hoverimage { border: none; background: none; } .imgpost:hover .hoverimage { display: block; }

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

1 个答案: