title: Card flip inside Bootstrap modal with dynamicly imported image
body: <p>I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.</p>
  
  <p>When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.</p>
  
  <p>I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card. </p>
  
  <p>I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).</p>
  
  <p>My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.</p>
  
  <p>Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>main {
    .container-fluid;
    .text-center;
    background: none;
    header {
      .container-fluid;
      .text-center;
      padding: 50px;
      h1 {
        font-weight: @font-weight-heading;
      }
    }
    .cardColumns {
      .make-row();
      .cCard {
        .make-xs-column(4);
        .make-sm-column(3);
        .make-md-column(2);
        padding: 10px;
        img {
          width: 100%;
          height: auto;
          .img-rounded;
          modal-body-shadow: 0 4px 8px 0 #000;
          transition: 0.3s;
        }
        img:hover {
          modal-body-shadow: 0 8px 16px 0 #000;
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;div class="cardColumns"&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="cCard"&gt;
        &lt;a href="#"&gt;
          &lt;img src="img/card.jpg" alt="Perspiciatis"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>