Fade in information of ad when hovering unqiue div - php

Question

I have many images each with their own unique id. each image is a link to its ad. I want to add a hover fadeIn effect that will display some info about that ad on top of the image.
I tried to do something but I don't think I am taking the right approach.
I feel like there is a better way to get the div on top rather than doing margin: -105px 0 0;
Also, I can't think of how to tell it "if id=1 is hovered, fadein id=fade1, else fadeout"
http://jsfiddle.net/mKDP4/4/
Dynamic div (in php)
<img src="test.jpg" class="ad_cover" id="1">
<div class="ad_fade" id="fade1"></div>
<img src="test.jpg" class="ad_cover" id="2">
<div class="ad_fade" id="fade2"></div>
<img src="test.jpg" class="ad_cover" id="3">
<div class="ad_fade" id="fade3"></div>
JQUERY
$('.ad_cover').mouseover(function() {
var ad_id = this.id;
$('#fade'+ad_id).fadeIn('slow');
});
$('.ad_cover').mouseout(function() {
var ad_id = this.id;
$('#fade'+ad_id).fadeOut('slow');
});
CSS
.ad_cover{
width:100px;
height:100px;
}
.ad_fade{
display:none;
position:absolute;
margin:-105px 0 0;
width:100px;
height:100px;
background:rgba(255,255,255,0.8);
}
All help is appreciated!

Answer 1

Instead of messing with margins in your CSS, you can use background-image and place the images inside of your div elements like so:
HTML
<div class="ad">
<img src="..."/>
</div>
<div class="ad">
<img src="..."/>
</div>
<div class="ad">
<img src="..."/>
</div>
CSS
.ad img {
width:100px;
height:100px;
display:none;
}
.ad {
width:100px;
height:100px;
background-image:url(...);
display: inline-block;
}
Then, using .hover() and .children(), you can hide/show the content of the divs like so:
$('.ad').hover(function() {
$(this).children('img').fadeIn('slow');
},
function() {
$(this).children('img').fadeOut('slow');
});
This way, you don't have to mess with combining IDs and classes and only have to use the one class on the parent divs.
Here is a fiddle of it in action: http://jsfiddle.net/9zP7g/