title: How do I flip an image and keep the flipped side on
body: <p>I want to rotate an image to 180 degrees and keep the flip side on.
  I've tried various css but image gets back to its original side when I hover anywhere else.</p>
  <p>I'm posting one of the tried code here</p>
  <p>CSS :</p>
  <pre><code>.card {
      width: 130px;
      height: 195px;
      background: url(&quot;images/card-back.jpg&quot;) no-repeat;
      margin: 50px;
  }
  
  .card:hover {
      background: url(&quot;images/card-front.jpg&quot;) no-repeat;
  }
  </code></pre>
  <p>HTML :</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;card&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>