CSS Change font size/weight on caption hover text for 1st line and 3rd line

Viewed 23

Creating a website in squarespace 7.1 and trying to customise css with very little knowledge of css.

I'm looking to change the font size on the caption hover text. my caption text is 4 lines long with a soft return on each new line. I've managed to split the lines of my caption up into 4 lines using

.gallery-caption p{white-space: pre;}

I'd like to make the 1st and 3rd lines in bold or larger font sizes.

I've tried inserting

.gallery-caption p:first-line {font-weight:bold}

at various points but cant to get it to change the hover text. This is the css I have just now:

figure.gallery-masonry-item {
    position: relative;
}

.gallery-caption {
  position: static;
}

.gallery-caption
  p{white-space: pre;  
}


/* title */
.gallery-caption-content {
    position: absolute;
     left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    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;
  font-family: Source Sans Pro;
  font-size: small;
  }
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: #f1a638; /* 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;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
1 Answers

Split said 4 lines to 4 tags.

<span>1</span>
<span class="text-bold">2</span>
<span>3</span>
<span class="text-italic">4</span>

If you can not split 4 lines to 4 tags, you can not do this with only html and css, it will need some javascript.

Related