How to display product prices and names only on hover in Dawn?

[LayNoNuma]

Hi,

I wish the prices and names of my products would only appear when you hover the mouse over them.

The site is: rvrsedesign.com

Password: giskau

Thanks, Thomas.

[LayNoNuma]

Hi.

I'm fine what about you?

Yeah i would like to know the solution thanks.

[GemPages · Accepted solution]

Hello @LayNoNuma 

It's GemPages support team and glad to support you today.

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 </body>:

<style>
@media screen and (min-width: 750px){
  slider-component li.grid__item:hover .card-information{
     display: block;
  }
  slider-component .card-information{
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    z-index: 2;
    margin-top: -25px;
    display: none;
  }
  slider-component .card-information .price{
    justify-content: center;
  }
}
</style>

Result:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[LayNoNuma]

Hi,

Thank you a lot, it worked well! but is there a way to make it clickable on the image too?

Also is there a way to do something similar on mobile, maybe just hiding name and price?

Thanks, Thomas.