Jump to content

CSS to show event thumbnail on calendar ONLY on hover?

Recommended Posts

My client wants her calendar to look clean and simple, with no event thumbnails showing except when you hover over the event. That way she won't have days with only one event showing a thumbnail and days with more than one only showing text.

Is there a way to accomplish this with CSS?

Link to comment
  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 9/22/2023 at 6:34 AM, HMitrushi said:

https://www.williamfogglibrary.org/calendar

For now I don't have any thumbnail images in there, but ideally, we'd like the thumbnail to show up only on hover whether there is just one event in a day or several.

Thanks!

Can you add a thumbnail image? We can check easier

if the site is live & you can't do this, you can create a test page > add calendar, set password then share url.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Add to Website Tools (under Not Linked) > Custom CSS

.yui3-squarespacecalendar img.background-image {
    opacity: 0 !important;
}
.yui3-squarespacecalendar td:hover img.background-image {
    opacity: 1 !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.