0

我有一个带有投资组合图像的网站，当图像悬停在上面时，会出现一个叠加层。

我以这样一种方式实现了这一点，这意味着当代码相乘时（对于 3 个不同的投资组合项目），叠加层总是只覆盖第一个图像，而不是翻转的每个不同图像。

任何人都可以帮忙吗？

直播链接在这里

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

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

1 回答 1

0

要覆盖每个不同的翻转图像，您必须对 HTML 和 CSS 文件进行一些更改。在您的 HTML 文件中搜索 <div class="image"> 并将每个 <img class="hoverimage"> 元素放入 <div class=""imgpost"> 中： 

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

然后删除这个样式： 

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

于 2012-08-11T19:21:24.130 回答