Custom CSS on main page of website

Site URL: https://www.morgangregory.com

I've been trying for months to try and add some sort of Custom CSS to my main page on my site- not an additional gallery that all the tutorials do it on. Nothing seems to help me. All I want to do is add a text hover over the images on that page, instead of have the page title underneath the image/link (see attached image for example). To make my homepage more exciting, as you can't change the template of your site without starting a new one and a new billing plan etc.

Could this depend on the template/design you use? Or is it just a fact you simply can't change anything on you main page? -You're stuck with that design and that's it.

Hi. Add to Design > Custom CSS

/* Portfolio page hover */
a.grid-item {
    position: relative;
}
.portfolio-text {
    position: absolute !important;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    z-index: 999;
    opacity: 0;
}
a.grid-item:hover .portfolio-text {
    opacity: 1;
}

Wow thank you!

Is there a way I can make the hover a solid colour or adjust the font at all?

On 3/16/2021 at 9:25 PM, Morgan2020 said:

Wow thank you!

Is there a way I can make the hover a solid colour or adjust the font at all?

Hi. Sorry for the delay. Do you still need code for solid color yet?

Yes please, will you also be able to change the colour within the coding?