(Squarespace) Gradient Overlay over Images in Event Page on hover

[tuanphan]

To add a gradient overlay over Image in Event Page on hover, you can do these steps.

#1. First, find Event Page ID.

In my example, we will have: #collection-67b562fedf9c422667881c3c

#2. Next, use this code to Custom CSS box
If code doesn’t work, you can comment below, message or send me an email.

#collection-67b838a48c2039685c8e4744 {
.eventlist .eventlist-event a {
    position: relative;
    overflow: hidden;
}
.eventlist .eventlist-event a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0,0,255,0.5), rgba(255,0,0,0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.eventlist .eventlist-event a:hover::before {
    opacity: 1;
}}

#3. To change gradient color, change these.

[romano97002 (Romano LAPINCE)]

@tuanphan,