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