title: how to show override hover state i
body: <p>All
  i want to set hover state active on mobile device </p>
  
  <p>I have 2 scenarios    <strong>when user use website on desktop ,when he hover on before image after image will replace by before</strong> .</p>
  
  <p>But when user <strong>access website using mobile only after image is shown to user</strong> </p>
  
  <p>My destop is completey implemeted but don't know how to achieve mobile version </p>
  
  <p><a href="https://www.tutorialrepublic.com/codelab.php?topic=faq&amp;file=css-image-swap-on-hover" rel="nofollow noreferrer">DESTOP Example</a></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>    .card {
          width: 130px;
          height: 195px;
          position: relative;
          display: inline-block;
          margin: 50px;
      }
      .card .img-top {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 99;
      }
      .card:hover .img-top {
          display: inline;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="card"&gt;
       &lt;img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"&gt;
          &lt;img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg" class="img-top" alt="Card Front"&gt;</code></pre>
  </div>
  </div>
  </p>