Overlay on image for three different images, only overlays first - html

Question

I have a site with a portfolio image, when the image is hovered on, an overlay appears.
I have implemented this in such a way that it means when the code is multiplied (for 3 different portfolio items) the overlay is always only over the first image, rather than on each different image being rolled-over.
Can anyone help?
Live link is here
The code used to make the image overlay:
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

To overlay on each different image being rolled-over, you'll have to make some changes in your HTML and CSS files. In your HTML file search for <div class="image"> and put each <img class="hoverimage"> element inside <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>
Then in your CSS add/modify the folowing styles:
.hoverimage { position: absolute; top: 1px; left: 1px; display: none;}
.imgpost .hoverimage {
border: none;
background: none;
}
.imgpost:hover .hoverimage {
display: block;
}
Then delete this style:
.image:hover .hoverimage { display: block; }​