How to enable hover over function on desktop but disable it on mobile?

Julieta_T · May 23

Hi there!

I'm in the process of creating my website. I want to apply a CSS code so that all images on the desktop version turn from grayscale to color once the user hovers over the image, but since this effect is not possible on mobile view, I want to include another code so that this effect does not affect the mobile images. I wan the images on the mobile view to remain colored.

Is this possible?

Also, has anybody experienced issues with this same function on the desktop version? The site is not live yet, but when working on it, sometimes the hover over effect works perfectly and sometimes it does not work and the images stay as greyscale images.

Thank you!

Beyondspace · May 24

On 5/24/2024 at 12:31 AM, Julieta_T said:

Hi there!

I'm in the process of creating my website. I want to apply a CSS code so that all images on the desktop version turn from grayscale to color once the user hovers over the image, but since this effect is not possible on mobile view, I want to include another code so that this effect does not affect the mobile images. I wan the images on the mobile view to remain colored.

Is this possible?

Also, has anybody experienced issues with this same function on the desktop version? The site is not live yet, but when working on it, sometimes the hover over effect works perfectly and sometimes it does not work and the images stay as greyscale images.

Thank you!

Can you share your URL and screenshot where you want to apply the hover effect so I can check it?

inside_the_square · May 26

Hey @Julieta_T - this is a great question! You can use a media query to make any custom code work on a specific screen size. A lot of us Squarespacers consider mobile to be anything smaller than 640px wide, but some consider it to be 950px or smaller because that's when the mobile menu kicks in; that value is up to you! Whatever size you want to isolate, add your grayscale code inside a query like this:

@media only screen and (min-width: 641px) {
 img:hover {
  filter:grayscale(1)
 }
}

This code says "any screen that is at least 641px wide, use this code!"
I have a tutorial video & article with more info here: https://insidethesquare.co/mobile

I hope that info helps! And in regards to the hover issue in edit mode; I have heard of some hover effects being buggy in the config (when you're actively using the editor) Make sure you test it outside the program, like an incognito browser, and double-check that your hover effect is applied to the top layer of content. Best of luck with your project! 🙂

Julieta_T · May 28

Thank you!! It was very helpful and I was able to solve it!

How to enable hover over function on desktop but disable it on mobile?

Recommended Posts

Julieta_T

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Julieta_T

Beyondspace

inside_the_square

Julieta_T

Create an account or sign in to comment

Julieta_T

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources