Can hover text be displayed automatically on mobile devices?

Question

I am using a website template on Cargo Collective. On the Home page, there is a grid of images with text that only appears on hover. In Mobile view, the text does not appear. I understand hover doesn't work consistently on mobile devices. Is there a way to set this text to appear when the page loads on mobile?

Alternatively, how would I remove the hover functionality and have the text always visible?

Here are the two spots where hover appears in the CSS:

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
 border-bottom: 0;
 padding-bottom: 0;
}

/**
 * Thumbnail Hover
 */

.thumbnails .thumbnail > a {
 position: relative;
}

.thumbnails .thumbnail .title {
 background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 1.2rem 0.7rem 1.2rem;
    margin: 2.4rem;
    color: rgba(255, 255, 255, 1);
    align-content: center;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    opacity: 0;
}

.thumbnails .title span {
 margin: auto;
 display: inline-block;
}

.thumbnails .thumbnail:hover .title {
    opacity: 1;
}

body.mobile .thumbnails .thumbnail:hover .title {
 opacity: 0;
}

You may want to use media queries. Using this method you can set the text to be visible/hidden depending on the given screen size. https://stackoverflow.com/questions/42025632/how-to-detect-only-with-css-mobile-screens?rq=1 — Chase Ingebritson, Sep 26 '18 at 18:44

The Fool · Accepted Answer · 2018-09-26T19:09:41.483

Out if this part we can make something up.

body.mobile .thumbnails .thumbnail:hover .title {
opacity: 0;
}

What if we removed the .thumnails:hover and changed the opacity to 1? it might do the trick.

body.mobile .thumbnails .title {
opacity: 1;
}

I hope this works but I have no Idea about Cargo Collective. Just using css knowledge.

I recommend to you to learn some css basics. This will help you to solve problem like this in the future.

score 0 · Answer 2 · answered Sep 26 '18 at 18:54

Here's a small example showing how you could hide and display text depending on the width of the viewport using media queries. A similar method can be applied to your problem by only setting the :hover properties when the screen has a given minimum width.

Also note, that that device-width has been depreciated and removed from Web standards. So be careful when choosing your media query.

/* General styles */

p {
  transition: opacity 0.3s;
}

/* Small styles */

.large {
  opacity: 0;
}

.small {
  opacity: 1;
}

/* Large styles */

@media only screen and (min-width: 640px) {
  .large {
    opacity: 1;
  }
  
  .small {
    opacity: 0;
  }
}

<p class="large">I'm visible when the screen is large!</p>
<p class="small">I'm visible when the screen is small!</p>

I should also mention that this is by no means a perfect solution. If you want to be more accurate, I would recommend using Javascript to detect the device type and modify your classes via Javascript.

Can hover text be displayed automatically on mobile devices?

2 Answers2