图像叠加设计与susy /指南针

Question

我会使用指南针/ 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>