How to write text over image in collection?

Store Design
1

Does anyone know how to write the text box and button in the middle of the image ? and lower opacity? (this is collection image)

Eileen12_0-1656716879323.png
Eileen12_0-1656716879323.png1647×868 276 KB

I want to have text “Summer” and “coming soon” on the image like below

Eileen12_1-1656716967217.png
Eileen12_1-1656716967217.png1650×814 375 KB

thank you!!

2

@Eileen12 - can you share your collection page? it might work with css settings

3

Do you mean this link?

https://paw-pparel.com/collections/summer-collection

4

@Eileen12 - can you please share password to view file?

5

sure

pw is harubori

6

@Eileen12 - one mroe thing, you have that pop up box for offers, please remove it, it does not allow user to close it and user will just go away from the site

7

Sure i will remove it now

8

@Eileen12 - please add this css to the very end of your base.css file and check

.card {position: relative; margin-bottom: 20px;}

.card--standard>.card__content {
    position: absolute;    top: 50%;
    bottom: 0;    left: 0;    right: 0;
}

suyash1_0-1656734259939.png
suyash1_0-1656734259939.png1366×768 189 KB

9

how do you reduce opacity?

10

And I wanted for collection not three items above

11

@Eileen12 - for opacity, add opacity property to css, so all code becomes like below, and if you want this for collection page only then will need to edit your code as your theme do not have any specific unique class or id for page and elements

.card--standard>.card__content {
    position: absolute;
    top: 50%;    bottom: 0;    left: 0;
    right: 0;    opacity: 0.4;
}