Making Header Disappear In Collection Photo Thumbnails On Home Page

[thosewhobloom]

I am trying to get rid of these headers, that are in the center of the image. As shown in the “Dark” thumbnail, I’m basically moving the text below - and I’m doing that in photoshop. What custom css can I enter to make this header in the center of the image disappear? I don’t want to apply css to the entire website, for fear of it creating other issues, so just to this section.

[StudioEnchant]

Hey @thosewhobloom ,

please provide store URL.

the code will be something like:

h2 {
display: none;
}

[thosewhobloom]

Hi. I entered the code that you suggested and changed it to h3. That worked! Is there an easy way to just change it so it is displayed below the image, similar to “Dark” in my original screenshot?

The website it thosewhobloom.com

[StudioEnchant]

Yes, use the following code and remove the previous one:

.collection-list__title-text {
    text-align: center;
    font-size: 2rem;
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

[thosewhobloom]

Thanks, that is certainly moving the needle in the right direction. However it is still in the image. I would like this below the images, how “Dark” is in the first screenshot I shared.

I’m attaching a screenshot of the effect your text did, after I tweaked it a little bit.