Image overlay design with susy/compass - susy-compass

Question

I would to use compass/susy and I need to make the same thing as pure css.
This is an example : http://www.lycee-celony.com/
I need that text be positioned on to the image, in the slideshow.
How can I do that with these tools or others from compass?
For image, I can use :
.adaptable-img {
max-width: 100%;
}
My need is about the grid management for that, and in the technical nesting for these blocks.
Thanks
EDIT1: My css classic code that work for now:
#include at-breakpoint($desktop) {/* //Dimensions pour les pc*/
aside.DiapoHP{
img{#include adaptable-img;}
}
#transparency{ #include span-columns($desktop);}
#contenu-diapo{#include span-columns($desktop);}
}
#transparency{
background:none repeat scroll 0 0 $orange;/*Couleur du fond*/
height:em(65px);
bottom:em(70px);
left:em(12px);
position:absolute;
z-index:15;
#include opacity(0.6);
}
#contenu-diapo {
position: relative;
left: em(10px);
color: white;
z-index: 20;
h2 {
color: white;
padding: em(5px);
font-family: $AristaFont;
position: inherit;
bottom:em(85px);
}
a {
text-decoration: none;
}
}
For this html:
<aside class="diapoHP">
<div id="transparency"></div>
<div id="contenu-diapo">
<h2>blblblb</h2>
</div>
</aside>