Solved

add overly for collection image dawn theme

lulu57
Tourist
24 0 1

Hi,

I'd like to add an overlay, a semi-transparent layer to my collection image (attached below). Can anyone help me with that? Thanks a lot.

 

lulu57_0-1676960981389.png

 

 

https://horaciobikes.com.au/

pw: 0713Bang

Accepted Solutions (2)

PageFly-Victor
Shopify Partner
7865 1785 3043

This is an accepted solution.

Hi @lulu57 

 

This is Victor from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

    <style>
.collection-list__item.grid__item .card.card--standard.card--media {
  position: relative;
}
      .collection-list__item.grid__item .card.card--standard.card--media::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
        z-index:99;
    background-color: rgba(0, 0, 0, .5);
}
      
    </style>

 

Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

banned

View solution in original post

PageFly-Victor
Shopify Partner
7865 1785 3043

This is an accepted solution.

hi @lulu57  please replace the whole old code with this one, i will add the extra code to fix the heading here: 

    <style>
.collection-list__item.grid__item .card.card--standard.card--media {
  position: relative;
}
      .collection-list__item.grid__item .card.card--standard.card--media::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
        z-index:99;
    background-color: rgba(0, 0, 0, .5);
}
      .collection-list__item.grid__item .card__heading {
position: relative;
z-index: 999;
}
    </style>
banned

View solution in original post

Replies 7 (7)

PageFly-Victor
Shopify Partner
7865 1785 3043

This is an accepted solution.

Hi @lulu57 

 

This is Victor from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

    <style>
.collection-list__item.grid__item .card.card--standard.card--media {
  position: relative;
}
      .collection-list__item.grid__item .card.card--standard.card--media::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
        z-index:99;
    background-color: rgba(0, 0, 0, .5);
}
      
    </style>

 

Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

banned
lulu57
Tourist
24 0 1

Thanks so much Victor!

lulu57
Tourist
24 0 1

Hi Victor,

 

After I add the overlay, the texts on the image become not very clear, like the below:

lulu57_0-1677029387116.png

 

is there any way to make the text on the image very obvious? like the image below:

lulu57_1-1677029508831.png

 

thank you!

PageFly-Victor
Shopify Partner
7865 1785 3043

This is an accepted solution.

hi @lulu57  please replace the whole old code with this one, i will add the extra code to fix the heading here: 

    <style>
.collection-list__item.grid__item .card.card--standard.card--media {
  position: relative;
}
      .collection-list__item.grid__item .card.card--standard.card--media::before {
    content:"";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
        z-index:99;
    background-color: rgba(0, 0, 0, .5);
}
      .collection-list__item.grid__item .card__heading {
position: relative;
z-index: 999;
}
    </style>
banned
lulu57
Tourist
24 0 1

Thanks a lot! You're a lifesaver😀

Shafren
Visitor
1 0 0

Hi Victor,

 

The overlay worked great thank you. However, for Dawn 9.0 is there a way to centre the collection list titles over the image and position the text in front of the overlay so its clear? By defult my text is left alligned under the image.

 

Thanks for your help.

Jahid-KlinKode
Excursionist
145 1 4

Hey @lulu57, watch this YouTube guide at https://www.youtube.com/watch?v=LNCzj6cxw1s to add overlay in collection images in the Shopify Dawn Theme.