Site URL: https://flatworm-asparagus-nym2.squarespace.com/config/design/custom-css
Site not live yet.
I have some coding on my site for my gallery overlays so that the title of the project shows when you hover over it and then you can click into the project. I found the coding in this forum and I've been able to change the colour of the text but I have not been able to change the actual font or the size, even though it should be in the coding. I'm not a coder and I can't see what could be wrong with it, I've changed the size and font style within the code yet nothing changes.
As you can see in the coding below, it should be large, not that I want it that large, there was just no change in it at all.
What I have:
/* Masonry hover 2 */
figure.gallery-grid-item {
position: relative;
}
.gallery-caption, .gallery-caption-wrapper {
position: static !important;
z-index: 100 !important;
top: unset;
transform: unset;
height: initial;
opacity: 1 !important;
}
/* title */
.gallery-caption-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-family: work-sans;
font-size: 70px;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
padding: 7%;
transition: opacity ease 200ms !important;
opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
//TEXT
.gallery-item-description {
}
background: rgba(0,0,0,0.5); /* overlay color */
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
opacity: 1.00;
}
/* remove gap */
figcaption {
padding: 0 !important;
}