0

I used this article to add a display image on text link hover (see link and css used below) and it works great, however I want to ignore this css when viewing on mobile. It is important to note that this should be all css. Any ideas?

.hover_img a {
  position: relative;
}

.hover_img a span {
  position: absolute;
  display: none;
  z-index: 99;
}

.hover_img a:hover span {
  display: block;
}
<div class="hover_img">
  <a href="#">Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span></a>
</div>

Display Image On Text Link Hover CSS Only

kaya3
  • 47,440
  • 4
  • 68
  • 97
thomas
  • 1

1 Answers1

0

You can use hover media query.

The "hover" CSS media feature can bu used to test whether the user's primary input mechanism can hover over elements.

@media (hover: hover) {
  .hover_img a span {
    display: none;
  }
  .hover_img a:hover span {
    display: block;
  }
}

@media (hover: none) {
  .hover_img a span {
    display: block; /* always show on e.g. a touch device */
  }
}
<div class="hover_img">
  <a href="#">Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span></a>
</div>

Or you can use normal media query as you want. Like this:

(view on full page view)

.hover_img a span {
  display: none;
}

.hover_img a:hover span {
  display: block;
}


/* don't use hover for devices smaller than 720px */

@media screen and (max-width: 720px) {
  .hover_img a span {
    display: block;
  }
}
<div class="hover_img">
  <a href="#">Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span></a>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
  • I was writing the same answers, you where a little faster. :P Good solutions indeed, but for the hover media query I would be a little more cautious, since there are a lot of 'hybrid' devices with touch AND pointer devices. You could get some unexpected behaviours. – Dave Jun 12 '20 at 20:40
  • @dgnca thanks for the quick responses, when I try adding these it actually starts displaying the "hover_img" on mobile. Maybe im not integrating properly? – thomas Jun 13 '20 at 13:27
  • @dgknca The site is https://www.thomasjgardner.com if you want to see what’s going on. – thomas Jun 13 '20 at 13:49
  • @thomas isn't gives desired result? – doğukan Jun 13 '20 at 15:41
  • @dgknca no I’d like mobile site not to display the hover_img, apologies if I didn’t explain properly. – thomas Jun 13 '20 at 18:01