Caption image en jquery

Bonjour,

Je rencontre un petit souci lors de l'ajout d'un div à une image pour afficher une image à des images qui possèdent la class "right".
Mon souci est que le div qui contient la class "captionLegende" se place "dans" l'image avant la femeture de l'image et donc le div est invisible.
Merci pour votre aide

$("img.right").each(function(){

        var legende = $(this).attr("alt");
        var w = $(this).width();
        var h = $(this).height();
        var wCaption = w - 20;

        var captionLegende = ('<div class="captionLegende" style="width:'+wCaption+'px">'+legende+'</div>');
        $(this).append(captionLegende);
        $(this).wrap('<div class="caption" style="width:'+w+'px; height:'+h+'px; float: right; margin-left: 15px;">');

    })

// CSS
img.right {
    float: right;
    max-width: 300px;
    margin: 0 0 1px 0;
}
.caption {
    position: relative;
    margin-bottom: 28px;
}
.caption img {
    z-index: 2;
}
.caption .captionLegende {
    background: #817FA9;
    color: #fff;
    font-size: 11px;
    font-family: Arial;
    line-height: 1.2em;
    opacity: 0.8;
    z-index: 1;
    padding: 5px 10px;
    float: left;
}

// Resultat
<div style="width:300px; height:199px; float: right; margin-left: 15px;" class="caption">
<img alt="Terre &gt; France &gt; Loire &gt; Bourgueil &gt; Les Galichets" src="mediatheque/images/domaine/breton-17.jpg" class="right">
<div style="width:280px" class="captionLegende">Terre &gt; France &gt; Loire &gt; Bourgueil &gt; Les Galichets</div>
</img>
</div>