Move product title and price / on top of product image right on the bottom in a card.

[BERNAT-LASDUNAS]

Hey community, 

How are you doing.

I'm trying to add this card feature on top of the product image so there is no space between the product images. 

As You can see in the example below.

this is my site URL:  www.lasdunasbyron.com

Thanks for your time and help! 🙂 

[Dan-From-Ryviu]

You can do that by adding this CSS code at the bottom of your base.css file in store admin > Sale channels > Online store > Themes > Edit code > Assets 

@media only screen and (min-width: 768px) {
.card__content {
position: absolute;
}
.card-wrapper:hover .card__content .card__information {
background: #999;
}
}

[jewellerystore1]

Hi, 

I added this code but it has put the text at the top of the image. Can you help me change the text to be at the bottom left corner and not right on the edge?

 https://nuijewellery.com.au/collections/new-arrivals

Thank you

[Dan-From-Ryviu]

Hi, you solved it. Congrats

[jewellerystore1]

I did but there's a couple issues. 1. it's not showing on mobile. 2. I need to add spacing from the left edge so it's not right on the edge. PLEASE HELP!!

Thank you! 

[Dan-From-Ryviu]

Go to your base.css file, remove those lines that wrap your code to make it work for mobile .

You can add value to the left in that code to make it the left edge.

[eCommerceThesis]

Here is the easy guideline that you can follow.
https://www.youtube.com/watch?v=Oub7JrMLl2I