Collection List Text Overlay

Written by Paul Richard Lewis

2023-12-21

TL;DR

Create a text-hover-overlay on the Collection List section via adding css to its Custom CSS block.

Introduction

You might have looked upon this effect (see below image) in other Shopify websites, with longing. This is a relatively easy change, using Shopify's Custom CSS block.

Step-By-Step

1. Add the Collection List section

Place your Collection List Section where you would like it.

2. Access Collection List settings

Click on the Collection List Section to access the settings in the Theme editor.

3. Create a Custom Liquid block

Paste the below code in the Custom CSS block, down the bottom.

CSS
.card__content {
position: absolute;
opacity: 0;
top: 45%;
transition: all 1s ease;
}
.card-wrapper .card__media {
transition: all 0.3s ease;
}
.card-wrapper:hover .card__media {
opacity: 0.3;
}
.card-wrapper:hover .card__content {
opacity: 0.8;
}
.card__content h3 {
font-size: 3rem;
}
.card__content svg {
width: 1em;
}

Explanation

The above code takes the card__content, which is the h3 link content and positions it 45% from the top of its parent container. Hover effects and sizing have been altered for aesthetics.

Assistance

If you have any questions or would like some help with a project, please reach out.

Inspired by others built by me.