CSS to show event thumbnail on calendar ONLY on hover?

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?

Hi,

Can you share link to page where you use calendar? We can check easier

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!

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.

Thanks!

I created a test calendar page that doesn't have any special code, and I left the placeholder thumbnail in there. Like I said, the client wants the thumbnail to show only on hover, no matter how many events are in a single day.

https://www.williamfogglibrary.org/test-calendar

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;
}