Put heading text over image on collection list cards

Store Design
,
1

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

Obszar roboczy 1.png
Obszar roboczy 1.png490×650 351 KB

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.

123.png
123.png594×380 11.8 KB

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?

1 Like
2

Hi @Drakhtul

Would you mind to share your store URL? Thanks!

3

Hello @Drakhtul

Can you share store URL?

4

https://chloeshoptheme.myshopify.com/

5

password?

6

demo

7

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.

=>>

{% 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

1 Like
8

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?

123.png
123.png1459×861 76 KB

9

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.

123.png
123.png1533×621 118 KB

12323.png
12323.png1063×539 250 KB

10

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;
}
11

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

12

Hello Drakhtul,

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