JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.9/dist/css/uikit.min.css">
<!--Grid / Background-->
<div class="uk-text-center artif">
  <!--Anfang Card-->
  <div class="uk-card uk-card-default uk-card-hover ">
    <div class="front"><button class="front">öffnen</button></div>
    <div class="back">
      <button>Schließen</button>  
      <div uk-lightbox="animation: fade">
        <a class="uk-button uk-position-bottom-center uk-text-emphasis uk-button-default"
           href="https://artif.com/csg/img/platzhalter_ny_1200.png" data-caption="Happy NY">Lightbox</a>
      </div>
    </div>
  </div>
  <!--Ende Card-->
  <div class="uk-card uk-card-default  uk-card-hover card">
    <div class="front"><button class="front">öffnen</button></div>
    <div class="back">
      <button>Schließen</button>  
      <div uk-lightbox="animation: fade">
        <a class="uk-button uk-button-default uk-position-bottom-center"
           href="https://www.youtube.com/watch?v=c2pz2mlSfXA"
           data-attrs="width: 1280; height: 720;" data-caption="YouTube" >Video</a>
      </div>
    </div>
  </div>
  <!-- Ende -->
  <div class="uk-card uk-card-default  uk-card-hover card">
    <div class="front"><button class="front">öffnen</button></div>
    <div class="back" >
      <button>Schließen</button>  
      <div uk-lightbox>
        <a class="uk-button uk-button-default uk-position-bottom-center"
           href="img/platzhalter_ny_1200.png" data-caption="Image">Gemischt</a>
        <a class="" href="https://www.youtube.com/watch?v=c2pz2mlSfXA"
           data-attrs="width: 1280; height: 720;" data-caption="YouTube"></a>
        <a class="" href="https://vimeo.com/1084537" data-caption="Vimeo"></a>
        <a class="" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938"...

CSS

.artif {
  background-repeat: no-repeat;
  background-size: 100% ;
  background-image: url(https://artif.com/csg/img/bagrd2.jpg);
  min-height: 100vh;
  display: grid;
  grid-template: auto / repeat(auto-fill, minmax(19em, 1fr));
  gap: 1em;
}

.uk-card {
  transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.8, 1.4);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.1);
  height: 15em;
}
.uk-card .front, .uk-card .back {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0;
  height: 100%;
}
.uk-card .front {
}
.uk-card button {
  color: transparent;
  display: block; width: 100%; height: 100%; border: none;
  border: none;
  padding: 0;
}
.uk-card .front button {
   background-color: #00f0;
}
.uk-card .back button {
   background-color: transparent; 
}
.uk-card .front::before {
  content: " ";
  display: block; 
  position:absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url(https://artif.com/csg/img/csg-logo-200.png) center/cover no-repeat;
  opacity: 0.1;
}
.uk-card .back {
  display: none;
  transform: rotateY(180deg);
  background: url(https://artif.com/csg/img/white_300.png) center/cover no-repeat;
}
.uk-card.flipped {
  transform: rotateY(180deg);
}
.flipped .back {
  display: block;
}
.flipped .front {
  display: none;
}

.uk-button {
  opacity: 1;
}
.uk-sticky-below {
  transition: all 0.15s ease-out;
}

@media only screen and (max-width: 1400px) {
  .artif {
    background-repeat: repeat;
     }
}
@media only screen and (min-width: 79em) {
  .artif {
    grid-template: 8em / repeat(auto-fill, minmax(12em, 1fr));
  }
  .uk-card {
    height: 8em;
  }
}

JavaScript

const artif = document.querySelector(".artif");
artif.addEventListener("click", flipCard);

function flipCard(event) {
  const clicked = event.target;
  if (clicked.tagName == "BUTTON") {
     const card = clicked.closest(".uk-card");
     const panel = clicked.parentElement;
     card.classList.toggle("flipped");
     const other = panel.classList.contains("front") ? ".back" : ".front";
     card.querySelector(other + " button").focus();
        
  }
}