Jump to content

Trying to use media queries to change hover effect on animation on mobile

Go to solution Solved by tuanphan,

Recommended Posts

I am building a site for client that has an animation on the landing page which plays on hover, but I would like it to play automatically on mobile. I tried adding media queries to my css for the animation, but when I did the animation just disappeared. The site is: https://apricots-glockenspiel-bp3w.squarespace.com password: hjz. The code I used is:

@media screen only and (min-width: 951px) {#block-yui_3_17_2_1_1677692883512_13151 {background-image: url("https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/63ffa436d602ff11286533c3/1677698110235/Untitled_Artwork+29.png");
background-size: cover;
  }}
@media screen only and (min-width: 951px) {#block-yui_3_17_2_1_1677692883512_13151:hover { background-image: url("https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/6407ad3c0a922d6651a42ca5/1678224755080/Untitled_Artwork+4+copy.gif");
  }}
@media screen only and (max-width: 640px)
{#block-yui_3_17_2_1_1677692883512_13151 {background-image: url(https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/6407ad3c0a922d6651a42ca5/1678224755080/Untitled_Artwork+4+copy.gif);
background-size: cover;
  }}

Thank you!

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

On 3/28/2023 at 2:11 AM, Lowtherpress said:

Yes, that's right

You can add a static image, when hover, we can use code to change to gif, and set gif appear first on mobile

What do you think?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/2/2023 at 6:24 AM, tuanphan said:

You can add a static image, when hover, we can use code to change to gif, and set gif appear first on mobile

What do you think?

Yes, that's how I have it on desktop – there is a static image and then a gif plays on hover. How would I code it so that gif plays automatically on mobile only?

Link to comment
  • Solution
On 4/7/2023 at 2:36 AM, Lowtherpress said:

Yes, that's how I have it on desktop – there is a static image and then a gif plays on hover. How would I code it so that gif plays automatically on mobile only?

Don't remove your code. Add this CSS for mobile

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1677692883512_13151 img {
    content: url("https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/6407ad3c0a922d6651a42ca5/1678224755080/Untitled_Artwork+4+copy.gif");
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/8/2023 at 5:16 AM, tuanphan said:

Don't remove your code. Add this CSS for mobile

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1677692883512_13151 img {
    content: url("https://static1.squarespace.com/static/639deed3983f0a5c484c8891/t/6407ad3c0a922d6651a42ca5/1678224755080/Untitled_Artwork+4+copy.gif");
}
}

 

Worked! Thank you so much!

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.