How to put text inside collections image and center it?

[Motoblox]

Can someone please help me put the collection name text from under the collection to be inside instead, my collections look like this right now-

I want them to look like this instead-

If someone can help me achieve this that would go a long way, also there is button coming under the text as you hover over it and the whole image is clickable  , i want mine to be like this only. Please help it would be highly appreciated!

[Moeed]

Hey @Motoblox 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card__content {
    position: absolute;
    justify-content: center !important;
    inset-area: center !important;
}
h3.card__heading {
    color: white !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Motoblox]

The text is inside now exactly how i wanted however is it possible for the arrow to show up only after i hover over the image like this-

Before

and After hovering the arrow comes under the text like this with a round background  -

[chethan025 · Accepted solution]

Hello @Motoblox ,

With this code, you can get the arrow like in the picture

<style>
.card__content {
    position: absolute;
    justify-content: center !important;
    inset-area: center !important;
}
h3.card__heading {
    color: white !important;
}
/* Arrrow Icon Styleing */ 
.icon-wrap {
background: #fff;
color: #000;
width: 3rem;
height: 3rem;
border-radius: 50%;
place-items: center;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show the icon-wrap with a transition effect on hover */
.card__content:hover .icon-wrap {
display: grid;
opacity: 1;
transform: scale(1);
}

 /* Style for the link text */
    .full-unstyled-link {
        color: #fff;
        text-decoration: none;
        text-align: center;
        display: grid;
        place-items: center;
    }
</style>

It should look like this

Let me know if this works!

Best Regards, 

Chethan S

[Motoblox]

Sure i will try this but where do paste this code?

[chethan025]

Paste this code where you pasted the code from @Moeed 

[Motoblox]

Ok so should i add it under it?

[chethan025]

I've added both the code for arrow and the code from @Moeed just replace that code with this code. 

[Motoblox]

Got you, thanks a ton for your effort man appreciate you!

Can you help me make the collections as a carousel too, because as soon as i add more collections they come on the next line while i want them to be in the same line in kind a of a slider carousel

[chethan025]

Sure, I can help you with that. 

WhatsApp me @+91 6363993184

I'll help you with anything.

Does the code worked btw...?

[Motoblox]

I will have to do that later as I don’t have my mac right now with me

[chethan025]

Sure, let me know if you need anything. 

[Motoblox]

Surely but for right now just wanna know how to make the collection slider/carousel

https://buildminibricks.com/products/3 here is the link to what i wanna get for my store if you scroll to the bottom there is a shop by category section that is a carrousel, I wanna get this for my store