Jump to content

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

Go to solution Solved by inside_the_square,

Recommended Posts

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!

Link to comment
  • Replies 3
  • Views 748
  • Created
  • Last Reply

Top Posters In This Topic

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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • Solution

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! 🙂 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.