Put heading text over image on collection list cards

[Drakhtul]

Hello, i want to add heading over the text in collection list cards.

I already found a part of the solution which is this snippet code:

.card__content {
    position: absolute;
    bottom: 1px;
    left: 15px;
    overflow: hidden;
    transition: all 0.5s ease;
}

The problem here is that it works on both collection list card and on product recommendation collection.

I would like to only target collection list cards without affecting anything else on the page so the text on products stay under the image. I'm pretty bad with css, i can't find any solution to that. Anyone could help me with that please?

[Made4uo-Ribe]

Hi @Drakhtul 

Would you mind to share your store URL? Thanks!

[niraj_patel]

Hello @Drakhtul 

Can you share store URL?

[Drakhtul]

https://chloeshoptheme.myshopify.com/

[niraj_patel]

password?

[Drakhtul]

demo

[BSS-Commerce]

Hi @Drakhtul ,

The code you added is correct, but with your requirement, you want only display like that in collections, you must add a condition so that this CSS will only work on page collections.

=>>

- You have to delete the CSS script you added to the CSS file earlier.

- Go Sale channel => Online store => Edit code. Search theme.liquid and add script before render {{content-for-layout}}: 

{% if template == 'collection' or template == 'list-collections' %}
        <style>
          .card__content {
            position: absolute;
            bottom: 1px;
            left: 15px;
            overflow: hidden;
            transition: all 0.5s ease;
          }
        </style>
{% endif %}

The result is only collection list cards without affecting anything else on the page so the text on products stay under the image.

Hope it helps @Drakhtul 

[Drakhtul]

Hmm. I think i did everything correctly. I went to base.css and removed all code regarding .card__content and then i went to the theme.liquid and pasted your code but nothing has changed. Am i doing something wrong?

[Drakhtul]

Beside that when i click collection Your code messing up the content. Without the code its all good, with it the text it's on the image.

[Drakhtul]

I found solution with this code

.collection-list__item .card .card__heading {
  position: absolute;
  bottom: 12.5%;
  left: 7.5%;
}

 The title is on the bottom left like i want but the problem is that image is not longer clickable, only the title text is the link to the collection and i would like to whole image be clickable.

Same situation with this

.collection-list__item .card__content {
    position: absolute;
    text-align: start;
    bottom: 0;
}

[Drakhtul]

I actually fixed that by myself. Thanks everyone for looking for solution and trying to help me. Please close the thread.

[FearlessAU]

Hello Drakhtul,

I saw you fixed your issue. Could you share what you did to make the whole card clickable again? Thanks