How can I make collection list cards transparent on mobile devices?

How can I make collection list cards transparent on mobile devices?

BixFoot
Excursionist
28 0 6

I am making one page that lists my products by design and another that lists them by product type. I am displaying a page with the collections lists for each. I want the Collections List cards to be transparent, and hide the title of the particular list, as I am putting the title directly on the image.

      I followed a suggestion and added the following code to my base css:

.collection-list .card__content{
opacity: 0;
height: 0
;
}

      It hides the title on my laptop, but when I look at the site on my phone, the title is still there. Also, there is a portion of the black card extending below the image. The only thing I want displayed is my image and if it is a PNG, I would like for the rest of the block to be transparent. Also, I need for the entire image to remain as a link to the collection.

     Basically, I want a transparent placeholder that serves as a link and it needs to work on mobile devices as well.

Any help will be greatly appreciated.

Sincerely.

BixFoot

  

Bixby Ehrmargerd Foot
Replies 0 (0)