Jump to content

Disable image hover effect in mobile view with CSS

By Carolinemw98, in Customize with code

Go to solution Solved by AndreaDube,

Recommended Posts

Carolinemw98 Level 2

Carolinemw98

Posted
Posted

Site URL: https://rabbit-aardvark-bj2d.squarespace.com/listings

I added a hover effect to poster images using CSS so that when you hover over an image the text appears with a darker background (making it easier to read), however I'd like to disable the hover effect all together in mobile view and just have it show up with the text and dark background. Is there any way to do this with CSS? Thanks! 

 

 

image.png.338e0b06ba4623801187cf6743d587e4.pngimage.png.45962b6bcf4a4ea9edf3a8e9b7abdbcd.png

Link to comment
  • Replies 2
  • Views 270
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

AndreaDube
AndreaDube

Try  @media screen and (max-width: 833px) { .design-layout-poster .image-card-wrapper { background-color: rgba(0,0,0,.5) !important; } }  

Posted Images

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources