Hi everyone,

 

I have a set of mages on this site that need to have a .png overlay on them when hovered over.

 

Problem I am having at the moment is that instead of hovering on each individual image, all three instances are hovering over the first.

 

I could probably fix this by creating three different image hover elements and adjusting the CSS, but then it feels like I'm just taking up space writing out almost the same code 3 times in a row, so am now looking for a neater solution for this.

 

Can anyone think of a way this would work on all three portfolio entries without duplicating the code?

Edited August 11, 201214 yr by Fran Haselden

The only way I could get your code to work was to split it into three:-

HTML:=

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

CSS:-

.image, .image2, .image3 { position: relative;
height: 240px; float: left; width: 250px; }

.hoverimage { position: absolute; top: 5px; left:
25px; display: none;}
.image:hover .hoverimage { position: absolute; top:
5px; left: 5px; display: block; }
.hoverimage2 { position: absolute; top: 5px; left:
25px; display: none;}
.image2:hover .hoverimage2 { position: absolute;
top: 5px; left: 5px; display: block;}

.hoverimage3 { position: absolute; top: 5px; left:
25px; display: none;}
.image3:hover .hoverimage3 { position: absolute;
top: 5px; left: 5px; display: block; }

 

A pseudo hover on div.image won't work in IE6 (only on the "a" tag). I think a conventional css hover popup would work in all IE versions and you can adjust the offset to make the hover image show over the correct image.

[i don't know why there is ​ after some codes above, just ignore it if it's still there. I think it has cured itself.]

Edited August 12, 201214 yr by Wickham

Well the reason why each of your overlay png images are clumped together to the left is because each of them has a property of "left: 25px". Since they all have the same container, they'll appear in the same place. Once solution is to create a seperate ID value for each png image and adjust the "left" property for each.

 

As for your question as to whether there is a way to do complete the overlay without creating multiple image tags (at least, this what I assume you mean), there is a way to do this with javascript where you could move the overlay to the appropriate image, thus allowing you to have only 1, but it's not ideal and you're much better off simply placing multiple <img/> tags.

 

Edit: Wickham posted right before I did. See his example as it's what I was trying to describe in my first paragraph

Edited August 11, 201214 yr by Pete Prosper

Well the reason why each of your overlay png images are clumped together to the left is because each of them has a property of "left: 25px". Since they all have the same container, they'll appear in the same place. Once solution is to create a seperate ID value for each png image and adjust the "left" property for each.

I did experiment with this bit couldn't get it to work, I got the transparent image over two or three at the same time, so I had to split the three completely separate

I did experiment with this bit couldn't get it to work, I got the transparent image over two or three at the same time, so I had to split the three completely separate

 

Interesting. I was able to accomplish this by removing the "left: 25px" property from ".hoverimage" and then assigning an ID value (and a "left" value) to each overlay png individually. With the "display: none;" property still active on ".hoverimage", everything still functioned as it should have. Perhaps I changed something and didn't mention it.

 

In any case, I personally think your method to split it into 3 different containers is a much cleaner choice.

The only way I could get your code to work was to split it into three:-

HTML:=

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

CSS:-

.image, .image2, .image3 { position: relative;
height: 240px; float: left; width: 250px; }

.hoverimage { position: absolute; top: 5px; left:
25px; display: none;}
.image:hover .hoverimage { position: absolute; top:
5px; left: 5px; display: block; }
.hoverimage2 { position: absolute; top: 5px; left:
25px; display: none;}
.image2:hover .hoverimage2 { position: absolute;
top: 5px; left: 5px; display: block;}

.hoverimage3 { position: absolute; top: 5px; left:
25px; display: none;}
.image3:hover .hoverimage3 { position: absolute;
top: 5px; left: 5px; display: block; }

 

A pseudo hover on div.image won't work in IE6 (only on the "a" tag). I think a conventional css hover popup would work in all IE versions and you can adjust the offset to make the hover image show over the correct image.

[i don't know why there is ​ after some codes above, just ignore it if it's still there. I think it has cured itself.]

 

Tried this and though it does get the three rollovers working I'm having some awful trouble getting the spacing and styling to work. Have uploaded it (here) - any help? Don't worry. Bit of fiddling and I got there in the end. Thanks a lot for your help on this one. Next up, make them link to a nice lightbox to play the video

 

Interesting. I was able to accomplish this by removing the "left: 25px" property from ".hoverimage" and then assigning an ID value (and a "left" value) to each overlay png individually. With the "display: none;" property still active on ".hoverimage", everything still functioned as it should have. Perhaps I changed something and didn't mention it.

 

In any case, I personally think your method to split it into 3 different containers is a much cleaner choice.

 

Yeah I tried this and got the same problems as you. I think the three dividing is a better way but still having trouble.

Edited August 12, 201214 yr by Fran Haselden