title: How do i disable CSS :hover in a media query?
body: <p>I have a hover effect that i only want to trigger when the viewport has a min-width of 900px. And i want to disable the hover effect when the viewport is smaller.</p>
  
  <p>How do i do this? </p>
  
  <p>PS: I'm using Sass (SCSS) which might be is helpful.</p>
  
  <p>This is a small snippet of the :hover effect that i want to disable. It is used to zoom images</p>
  
  <pre><code>img {
      display: table-cell;
      width: 100%;
      max-width: $painting-max-width;
      max-height: $painting-max-height;
  
      margin: auto;
  
      // zoom in animation transition
      transition: $painting-zoom-delay;
      transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;
  
      &amp;:hover {
          max-width: $painting-zoom-size;
          max-height: $painting-zoom-size;
      }
  
  }
  </code></pre>