greyscale images on desktop and color images on mobile

[pleeman]

Hi,

I have received custom code for team, post and portfolio images that set the images as greyscale and upon rollover they are color. I am writing to see if they can simply be color (no hover effect), but only on mobile (touch) devices vs. what they are now? -Thank you

Here is all of the custom css code I have been provided thus far for reference.

.portfolio-item figure.animated-overlay:hover figcaption {
  display: none;
}
.portfolio-item figure.animated-overlay {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}
.portfolio-item figure.animated-overlay:hover {
  filter: none;
  -webkit-filter: none;
}

.recent-post figure.animated-overlay:hover figcaption {
  display: none;
}
.recent-post figure.animated-overlay {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}
.recent-post figure.animated-overlay:hover {
  filter: none;
  -webkit-filter: none;
}

.team-member figcaption .thumb-info > ul.social-icons {
display: none;
}
.team-member figcaption .thumb-info {
height: 100%;
width: 100%;
}
.team-member figcaption a.view-profile {
height: 100%;
opacity: 0;
}

.team-member figure.animated-overlay figcaption {
background-color: transparent;
}

figure.animated-overlay:not(:hover) > img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

[Kyle – SUPPORT]

Hi

All of the css that has the filter: grayscale put inside a media query:

@media only screen and (min-width: 769px) { 

}

– Kyle

[pleeman]

Thank You Kyle

[Kyle – SUPPORT]

No problem