title: Trigger the hover pseudo-class in mobile when the user scrolls over an element
body: <p>I have some cards which slide open when you hover your cursor over them.  However, in mobile - I want the cards to slide open based on the user scrolling over them.  What's a good, current way to do this?  Is there a way to trigger pseudo-classes based on the relative position of an element in the mobile viewport?</p>
  <p>Currently I'm just using :hover and translate to manipulate the sliding behaviour on desktop.  Reproducible snippet below.</p>
  <p>Note: The snippet will not display the exact styling/imagery as the cards on my website, but it is good enough for the purpose of figuring out a solution.</p>
  <p>Your insights are appreciated!</p>
  <p>David</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>.shadowEffect {
    box-shadow: 2px 6px 6px 0px #282e34;
  }
  
  .cardContainer {
    //padding: 0px 50px 0px 50px;
    //transform: translateY(8px);
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    //align-content: space-around;
  }
  
  .cardContainer .card {
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 300px;
    width: 270px;
  }
  
  .cardContainer .card .face {
    height: 200px;
    transition: 0.5s;
  }
  //Face1 is the panel which transitions towards the top, face2 is the pane which appears and transitions to the bottom
  .cardContainer .card .face.face1 {
    position: relative;
    background: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
  }
  
  .cardContainer .card:hover .face.face1 {
    background: white;
    transform: translateY(0);
  }
  
  .cardContainer .card .face.face1 .content {
    opacity: 0.8;
    transition: 0.5s;
  }
  
  .cardContainer .card:hover .face.face1 .content {
    opacity: 1;
  }
  
  //cardImage1 and cardImage2 are separated because the icons in the 2nd and 3rd card are smaller by scale
  .cardImage1 {
    width: 45%;
  }
  
  .cardImage2 {
    width: 75%;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    //justify-content: center;
    align-items: center;
  }
  
  .cardContainer .card .face.face1 .content h3 {
    margin: 10px 0 0;
    padding: 0;
    color: black;
    text-align: center;
  }
  
  .cardContainer .card .face.face2 {
    position: relative;
    background: #282e34;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(-100px);
  }
  
  .cardContainer .card:hover .face.face2 {
    transform: translateY(0);
  }
  
  .cardContainer .card .face.face2 .content p {
    margin: 0;
    padding: 0;
  }
  
  // End of card CSS</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="cardContainer"&gt;
        &lt;div class="card shadowEffect"&gt;
          &lt;div class="face face1"&gt;
            &lt;div class="content"&gt;
              &lt;img class="cardImage1" src="./images/cardIcons/condo.svg"&gt;
              &lt;h3 class="cardBanner"&gt;Real Estate&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="face face2"&gt;
            &lt;div class="content"&gt;
              &lt;p&gt;Every property. Same price.&lt;br&gt; 6 hour turnover.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card shadowEffect"&gt;
          &lt;div class="face face1"&gt;
            &lt;div class="content"&gt;
              &lt;img class="cardImage2" src="./images/cardIcons/marketingmedia.svg"&gt;
              &lt;h3 class="cardBanner"&gt;Media&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="face face2"&gt;
            &lt;div class="content"&gt;
              &lt;p&gt;Videos. Photos. We're there.&lt;br&gt; Just give us a shot list.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card shadowEffect"&gt;
          &lt;div class="face face1"&gt;
            &lt;div class="content"&gt;
              &lt;img class="cardImage2" src="./images/cardIcons/training.svg"&gt;
              &lt;h3 class="cardBanner"&gt;Training&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="face face2"&gt;
            &lt;div class="content"&gt;
              &lt;p&gt;Need experience flying? &lt;br&gt;We can help.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card shadowEffect"&gt;
          &lt;div class="face face1"&gt;
            &lt;div class="content"&gt;
              &lt;img class="cardImage2" src="./images/cardIcons/licensed.svg"&gt;
              &lt;h3 class="cardBanner"&gt;Licensing&lt;/h3&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="face face2"&gt;
            &lt;div class="content"&gt;
              &lt;p&gt;Need a drone license? &lt;br&gt;Message us today&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>