Bilder als responsives Mosaik

Hallo zusammen,

ich würde gerne ein paar Bilder als Teaser für Artikel, Kategorien usw. auf der Startseite als Mosaik darstellen, dass sich je nach Auflösung verschiebt. Also z.B. 3-4 Bilder nebeneinander auf Desktops, aber nur 2 auf Tablets, auf Smartphones nur 1 Spalte.
Ich möchte Bordmittel nutzen, kein Java usw. Hier habe ich einen Code nur mit HTML und CSS gefunden:
(Link nur für registrierte Nutzer sichtbar.)

Leider funktioniert das ganze nicht, hab das CSS als eigenes CSS hinzugefügt und den Code in Index-Mitte gepackt. Die Platzhalter werden nur untereinander dargestellt und reagieren nicht beim Mouseover - als würde das CSS garnicht ausgeführt.

Ich füge den Code mal ein, vll hat jemand einen Tipp... gerne auch eine ganz andere Lösung für die Darstellung.
Vielen Dank!

HTML:

<div class="container">
  <div class="mosaic">
    <figure class="tile">
      <a href="#">
        <img src="http://www.placehold.it/300x300/abc/fff?text=Image with Link and Caption">
        <div class="overlay">
          <figcaption>This is the caption</figcaption>
        </div>
      </a>
    </figure>
    <figure class="tile">
      <a href="#">
        <img src="http://www.placehold.it/300x300/acb/fff?text=Image with Link">
        <div class="overlay"></div>
      </a>
    </figure>
    <figure class="tile">
      <img src="http://www.placehold.it/300x100/bac/fff?text=Image with Caption">
      <div class="overlay"><figcaption>This is the caption</figcaption></div>
    </figure>
    <figure class="tile">
      <img src="http://www.placehold.it/300x250/bca/fff?text=Image">
      <div class="overlay"></div>
    </figure>
    <figure class="tile">
      <div class="html-tile">
        <h5>This is a test of the HTML Tile</h5>
        <p>It should interact just like other image tiles do.</p>
        <a href="#" class="btn btn-default">Button</a>
      </div>
    </figure>
    <figure class="tile">
      <a href="#">
        <img src="http://www.placehold.it/300x400/cab/fff?text=Image with Link">
        <div class="overlay"></div>
      </a>
    </figure>
    <figure class="tile">
      <a href="#">
        <img src="http://www.placehold.it/300x300/cba/fff?text=Image with Link">
        <div class="overlay"></div>
      </a>
    </figure>
    <figure class="tile">
      <img src="http://www.placehold.it/400x250/bcd/fff?text=Image with Caption">
      <div class="overlay"><figcaption>This is the caption</figcaption></div>
    </figure>
    <figure class="tile">
      <div class="html-tile">
        <div class="well">
          <h5>This is a test of the HTML Tile Using a Well</h5>
          <p>It should interact just like other image tiles do.</p>
          <a href="#" class="btn btn-primary">Test Button</a>
          <div class="overlay"><figcaption>This is the caption</figcaption></div>
        </div>
      </div>
    </figure>
  </div>
</div>

Code:

.mosaic {
  -webkit-column-count: 4;
  -webkit-column-gap: 10px;
  -moz-column-count: 4;
  -moz-column-gap: 10px;
  column-count: 1;
  column-gap: 10px;
  @media screen and (min-width: 480px) {
    column-count: 2;
  }
  @media screen and (min-width: 768px) {
    column-count: 3;
  }
  @media screen and (min-width: 992px) {
    column-count: 4;
  }
  .tile {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    display: inline-block;
    > img,
    > a, > a > img,
    > .html-tile {
      display: block;
      width: 100%;
      height: auto;
    }
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: rgba(#63a3bf, .5);
      @media (max-width: 400px) {
        opacity: 1;
        height: auto;
        background-color: transparent;
      }
      figcaption {
        position: absolute;
        text-transform: uppercase;
        text-align: center;
        vertical-align: bottom;
        left: 50%;
        transform: translatex(-50%);
        bottom: 10px;
        font-size: 1em;
        line-height: 1.1em;
        font-weight: 600;
        color: #222;
        @media (max-width: 400px) {
          padding: 20px 10px;
          background: rgba(#63a3bf, .5);
          width: 100%;
          bottom: 0;
        }
      }
    }
    &:hover .overlay {
      opacity: 1;
    }
  }
}

 

Super, vielen Dank!! Ich werde mal damit ein bisschen rumspielen, ob ich das optisch so wie ich es mir vorstelle hinbekomme... mit etwas weniger Bildern und immer im ganzen rechteckig. Aber erstmal sieht das schon super aus!

Nur wie das im Shop integriert werden sollte ist mir noch nicht ganz klar... wie ich das CSS einbinde (nutze sonst nur "eigenes CSS" im Styleedit).

 

Super, es hat funktioniert! Leider macht mir der Editor im Content Manager den Code immer kaputt, wenn ich nochmal reingehe um etwas zu ändern... sieht dann auf einmal so aus:

HTML:

<div class="mosaic">
    <figure class="tile"><a href="#"><img class="img-responsive thumbnail" src="images/img/image1.jpg" /> </a>
    <div class="overlay">
        &nbsp;
    </div>

    <figcaption><a href="#">Test 1</a></figcaption>
    <a href="#"> </a></figure>
</div>
...

Warum passiert das...?