How can I overlap collection names with photos on my website?

Shopify Discussion
1

Hi Everyone,

I want my collection names to overlap the collection photos, how can I do it? Thanks so much!

cutestyou_0-1659073497403.png
cutestyou_0-1659073497403.png1163×414 129 KB

my store URL is cutestyou.com

pw: ayesho

2

@cutestyou

@media screen and (min-width: 750px){
.card__information {
    position: absolute !important;
    top: 85px !important;
    text-align: center;
}
}

Add this code in the bottom of component-card.css file.
Thank you.

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
section#shopify-section-template--16181882487040__collection-list .card__information {
position: absolute;
top: 90px;
bottom: 0;
left: 0;
right: 0;
}

Screenshot :- https://prnt.sc/IKvgZdKf2Aoy

4

Hi,

How can i change the Image overlay opacity? It looks funny if I don’t change that

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
section#shopify-section-template--16181882487040__collection-list .card__information {
position: absolute;
top: 90px;
bottom: 0;
left: 0;
right: 0;
}
section#shopify-section-template--16181882487040__collection-list .media.media--transparent.media--hover-effect {
opacity: 0.7;
}