Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Gallery grid Overlay Text Size and Font not changing


Ashley1234

Question

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

Site Overlay Screenshot.png

Link to comment

4 answers to this question

Recommended Posts

  • 0
3 hours ago, Ashley1234 said:

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

Site Overlay Screenshot.png

hi. applied below code
.gallery-caption-grid-masonry p { font-size: 30px !important; }

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...