How can I display product titles on images with a black filter?

Store Design
, ,
1

Hello,

I would like to display the product title on top of the image in the home page. Furthermore I would like to overlay a low opacity black filter to make the title stand out.

Using Dawn theme

Reference 1 is how it looks now

Reference 2 is how I would like it to look

ref1.PNG
ref1.PNG974×654 601 KB

ref2.jpg
ref2.jpg974×654 63.6 KB

2

Hello @medcanuni

It would be great if you share your store URL

3

https://medcan-university.myshopify.com/

password: chacia

4

Hello @medcanuni

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
.product-grid .card__heading { position: absolute; top: 40%; width: 100%; font-size: 18px; text-align: center; }
5

Hi @medcanuni

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file base.css

.card__heading{
margin-top: 0;

margin-bottom: 0;

position: absolute;

top: 40%;

width: 100%;

font-size: 18px;

text-align: center;
}

Hope this answer helps.
Best regards,
Victor | PageFly

6

Hey Mandasa,

This worked! Thanks so much for the help!

One more question, is there a way to put a black layer with the opacity of 50% over the images? So that the text can be seen better. Thanks a bunch!

Will attach the reference.

ref2.jpg
ref2.jpg974×654 63.6 KB

7 
.card__inner .card__media::after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.5);
	height: 100%;
	width: 100%;
}

Please add that CSS code

8

Amazing thank you!