Adding custom text on a banner

www.michaelaguocha.com

Pass:AguochaAccess

How do I add custom text on a banner?

I want to add text to the center of my Home Page, but it doesn't allow me to do so (I had to add a banner with text already on it). 

Add it to Design > Custom CSS

body.homepage:after {
    content: "I'm a Full-Stack Product Designer from Boston, Massachusetts";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    color: #f1f;
    font-size: 50px;
    text-align: center;
    width: 65%;
}

This works, except the text still appears when the banner of the other portfolio items are revealed (when I hover over the portfolio menu items).

Also, It remains in the same position no matter where I scroll on the screen.

How can this code be modified so that the text only appears in the center of the default banner, and disappears when another cover images appear?

for more context. I'm looking for behavior similar to the Hensen template in 7.0

The home page can display default response text (it's not a static image)

However, when you hover over the links, it displays the second image (the text disappears).

I want to do that for my page.

Additionally, I like some code highlighting (not just underlining)  the link I'm hovering over.

You mean hover on these items >> The text should disappear?

no, the code you provided previously keeps the text on the center of the screen even after I hover over the portfolio links.

I need the following code modified so that the text disappears when I hover over the portfolio links. The customer text should also only be in the center of the banner image.

body.homepage:after {
    content: "I'm a Full-Stack Product Designer from Boston, Massachusetts";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    color: #f1f;
    font-size: 50px;
    text-align: center;
    width: 65%;
}

6 hours ago, tuanphan said:

You mean hover on these items >> The text should disappear?

Yes. I meant hover on these links >> hide text in the above code. Is that right? If not, which links are you referring to?

Quote

Yes. I meant hover on these links >> hide text in the above code. Is that right? 

Yes that is correct; apologies for the misunderstanding. 

But I would also like to ask if there is any code for highlighting (not underlining) active text. The links are hard to read once the background image appears

On 4/2/2023 at 3:17 PM, tuanphan said:

Add it to Design > Custom CSS

body.homepage:after {
    content: "I'm a Full-Stack Product Designer from Boston, Massachusetts";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    color: #f1f;
    font-size: 50px;
    text-align: center;
    width: 65%;
}

 

Use this new code

body.homepage ul.portfolio-hover-items-list li:after {
    content: "I'm a Full-Stack Product Designer from Boston, Massachusetts";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    color: #f1f;
    font-size: 50px;
    text-align: center;
    width: 65%;
    line-height: 1.5em;
}
body.homepage ul:hover li:after{
    visibility: hidden !important;
}

The code you provided keeps the pink text fixated in the middle of the screen until the banner is off-screen. I need the pink text in the middle of the banner, not the page. So the pink text should move up as I scroll down the page.

(refer to the image below. I scrolled down to the middle of my home page. Ideally, the pink text should be where the white text is).

Another issue - the pink text disappears when my cursor hovers over it. I only need the pink text to disappear when I hover over the links, not the text itself.
 

body.homepage ul.portfolio-hover-items-list li:after {
    content: "I'm a Full-Stack Product Designer from Boston, Massachusetts";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
    color: #f1f;
    font-size: 50px;
    text-align: center;
    width: 65%;
    line-height: 1.5em;
}
body.homepage ul:hover li:after{
    visibility: hidden !important;
}

can I get an update on this request please?

 So the pink text should move up as I scroll down the page

I have no ideal to achieve this. 

Do you have any other ideas or options for what I can do with the text here?

This is the first screen users see when they log on to my page, so I like to provide a good first impression.