title: CSS - Element visible on backface after flip
body: <p>I'm working on a CSS flip card and ran into this issue, when despite <code>backface-visibility: hidden;</code> an element still visible from the other side.</p>
  
  <p>If you run the (<em>simplified here</em>) snippet and click <em><code>more</code></em> in the bottom right corner - the card flips, but the <em><code>more</code></em> stays visible. It's probably because of the <code>position: absolute</code>, because the other element behaves as expected.</p>
  
  <p>So my question - is it possible to fix that (preferably with CSS only) and still have the background semi-transparent? </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-js lang-js prettyprint-override"><code>document.querySelector('.card').addEventListener('click', function(e) {
   if (e.target.nodeName !== 'I') return;
   e.target.parentNode.parentNode.classList.toggle('flip');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    background: linear-gradient(90deg, #9EFFBE 0, #F4FFC7 45%, #F4FFC7 55%, #ADFCFF 100%);
  }
  
  .logo {
    background: yellow;
    border: 8px solid #fff;
    border-radius: 50%;
    display: block;
    height: 120px;
    margin: 1em auto;
    width: 120px;
  }
  
  .item {
    border: 1px solid transparent;
    display: flex;
    height: 170px;
    margin: 0 auto .75em;
    perspective: 800px;
    position: relative;
    width: 40%;
  }
  
  .card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
  }
  
  .card figure {
    margin: 0;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .card i {
    cursor: pointer;
    display: inline-block;
    position: absolute;
    right: .5em;
    bottom: .5em;
  }
  
  .card.flip {
    transform: rotateY(180deg);
  }
  
  .card--front {
    background: rgba(255, 255, 255, 0.33);
    border: 1px solid #fff;
    position: relative;
  }
  
  .card--back {
  background: #D9FAEF;
  background: rgba(255, 255, 255, 0.33);
  text-align: center;
  position: relative;
  transform: rotateY(180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article class="item"&gt;
    &lt;div class="card"&gt;
      &lt;figure class="card--front"&gt;
        &lt;div class="logo"&gt;&lt;/div&gt;
        &lt;i class="icon icon--info-circled"&gt;more&lt;/i&gt;
      &lt;/figure&gt;
      &lt;figure class="card--back"&gt;
        &lt;i class="icon icon--cancel-circled"&gt;close&lt;/i&gt;
      &lt;/figure&gt;
    &lt;/div&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>