Caption | changing font size, color

Site URL: https://gold-orca-rg9s.squarespace.com/

So I want to change the size/font/color of each image desciption which appears on hover?

What is access password?

ANTERO2022

On 3/26/2022 at 4:57 PM, JakeLake said:

ANTERO2022

Thank you.

All will have same style or different?

Preferably bigger, bolder and in gold (and framed?)?

Thank you so much!

On 3/29/2022 at 7:35 PM, JakeLake said:

Preferably bigger, bolder and in gold (and framed?)?

Thank you so much!

Add to Design > Custom CSS

body.homepage p.gallery-caption-content {
    font-size: 30px !important;
    color: #ffc700;
}

Wonderful ; and if I want the text positioned a bit lower lower? 
Also, the last image (STAR) I have used SHIFT+ENTER for two lines; how do I narrow the height?

Tried adding border without success;

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    color: #black;
      border: 20px solid #black !important;
}

On 3/31/2022 at 11:30 PM, JakeLake said:

Wonderful ; and if I want the text positioned a bit lower lower? 
Also, the last image (STAR) I have used SHIFT+ENTER for two lines; how do I narrow the height?

Tried adding border without success;

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    color: #black;
      border: 20px solid #black !important;
}

Black, has no # symbol

use this code

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    color: black;
    border: 20px solid black !important;
    padding-top: 50px !important;
}

1. I want the text to be bold.
2. I want the border around the text only please?
3. I want the border in gold please?

2 hours ago, JakeLake said:

1. I want the text to be bold.
2. I want the border around the text only please?
3. I want the border in gold please?

1. Use this CSS

body.homepage p.gallery-caption-content {
    font-size: 17px !important;
    font-weight: bold;
}

2. 3. Your current code, can't achieve this. Will need adjust lot of current code.

First, edit this code

figcaption.gallery-caption .gallery-caption-wrapper p.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;
}

to this

figcaption.gallery-caption .gallery-caption-wrapper {
    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;
}

next, edit this code

.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}

to this code

.gallery-grid-item:hover .gallery-caption-wrapper {
    opacity: 1 !important;
}

Next, add this code to Custom CSS

body.homepage figure figcaption .gallery-caption-wrapper p.gallery-caption-content {
    font-size: 17px !important;
    font-weight: bold;
    color: black !important;
    border: 1px solid gold;
}

Note: I don't know if the code you are using is for which sections of the website, other than the current section on the homepage, adjusting it, could affect them all.

So Events & festivaler — StarCruiter (squarespace.com) PW still = ANTERO2022

In the picture I want a scaled effect (opacity?) from left to right, - in order to make the overlay text more visible in the left part of the picture?

20 hours ago, JakeLake said:

So Events & festivaler — StarCruiter (squarespace.com) PW still = ANTERO2022

In the picture I want a scaled effect (opacity?) from left to right, - in order to make the overlay text more visible in the left part of the picture?

Add to Design > Custom CSS

/* events and festival image */
div#block-6f0990c7c36a0933b9ae figcaption:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
div#block-6f0990c7c36a0933b9ae figcaption {
    position: relative;
}
div#block-6f0990c7c36a0933b9ae figcaption .image-card {
    z-index: 99999999;
}

WOW - and if I want it to work on all pages?

I tried removing the div#block elements, which resulted in grayscale overriding hover on 1st page....

19 hours ago, JakeLake said:

WOW - and if I want it to work on all pages?

I tried removing the div#block elements, which resulted in grayscale overriding hover on 1st page....

 

With all pages, use this (not sure if it will cause any problems)

figcaption:after {
    content: "";
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
figcaption {
    position: relative;
}
figcaption .image-card {
    z-index: 99999999;
}

Overrode grayscale on first page.....guess I can target every page othervise with #block.
Will that effect loading times?

On 4/6/2022 at 4:43 PM, JakeLake said:

Overrode grayscale on first page.....guess I can target every page othervise with #block.
Will that effect loading times?

It won't affect loading time