bigbee - 7:43 am on Sep 23, 2011 (gmt 0)

Paul_o_b You are an absolute legend! Thank you ever so much! I managed to get it functioning from the first code you posted!

I have encountered a different problem now though, I want the image rollover to appear at different points across the page within the div. The idea is basically to have this icon rollover image sit next to the title in that div, and rollover when hover over the div.

The problem is that all of the titles are of different length, I do now have a functional div hover function which is perfect from the below code, how could I duplicate it a few times and point them to separate divs, and adjust the margin for each hover for each div?


<style type="text/css">
.wrap {
margin: auto;
position: relative;
}
.wrap p.img {
float: right;
margin: 10px;
text-align: center;
margin-right: 597px;
}
.over {
height: 200px;
left: -999em;
position: absolute;
text-align: center;
top: 10px;
width: 200px;
z-index: 2;
}
.wrap:hover .over {
left: 173px;
right: 70px;
margin-right: 600px;
}
.wrap p {
margin: 0 0 1em;
padding: 10px;
}
</style>