susy-compass - susy/compass を使用したイメージ オーバーレイ デザイン

Question

compass/susy を使用したいのですが、純粋な css と同じものを作成する必要があります。これは例です: http://www.lycee-celony.com/

スライドショーで、テキストを画像の上に配置する必要があります。これらのツールやコンパスの他のツールを使用してそれを行うにはどうすればよいですか?

画像の場合、次を使用できます。

.adaptable-img {
    max-width: 100%;
}

私が必要としているのは、そのためのグリッド管理と、これらのブロックの技術的なネスティングです。

ありがとう

EDIT1：今のところ動作する私のcssクラシックコード：

@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;
      }
    }

この html の場合:

<aside class="diapoHP">
    <div id="transparency"></div>
    <div id="contenu-diapo">
    <h2>blblblb</h2>
    </div>
</aside>