Reveal on Hover Product title, Price and Size availability. ( Product Grid - Dawn Theme)

Store Design
,
1

Hey community, how are you doing.

I’m struggling on making this happen on my site. Reveal on Hover Product title, Price and Size availability. ( Product Grid - Dawn Theme)

If anyone knows which code should I use.

I would truly appreciate your help.

Thanks.

Screen Shot 2023-05-10 at 7.20.44 am.png
Screen Shot 2023-05-10 at 7.20.44 am.png1753×692 176 KB

My Site:

https://www.lasdunasbyron.com/collections/unisex

2

@BERNAT-LASDUNAS

Please add the CSS below the end of the file: assets/component-card.css in your theme

.product-card-wrapper .card--standard>.card__content .card__information {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  transition: .3s all;
  opacity: 0;
  visibility: hidden;
}
.product-card-wrapper .card--standard .card__inner:after {
  transition: .3s all;
}
.product-card-wrapper:hover .card--standard .card__inner:after {
  z-index: 0;
  background-color: rgba(255,255,255,0.7);
}
.product-card-wrapper:hover .card--standard>.card__content .card__information {
  opacity: 1;
  visibility: visible;
}

Thanks!

3

When I add this, nothing appears to happen? Am I missing a extra step I need to do?

Thanks!