How to have Title and Price of Product show/ reveal upon hovering

[sundayflea]

Hello,

My website is currently showing the image below. I would like for the Title and Price to be hidden upon first look. Once the cursor is moved on top of the product image, the title and price would then be revealed on top of the now opaque image.

My current site: https://36-old-streets.myshopify.com/collections/all

Pass: 36streets

What I want my website page to look like when the cursor is above the product image:

When the cursor is NOT on top of the product, no title or price is shown:

Thank you for your time and help!!

[sundayflea]

Hi Ankur, I tried this but there is no change to the website. I am uploading both the codes you sent to theme.liquid file at the bottom. Copied below:

.product-card .product-card__title,
.product-card .product-card__price {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}

.product-card:hover .product-card__title,
.product-card:hover .product-card__price {
opacity: 1;
}

<script>
$('.product-card').hover(
function() {
$(this).find('.product-card__title, .product-card__price').css('opacity', '1');
},
function() {
$(this).find('.product-card__title, .product-card__price').css('opacity', '0');
}
);
</script>

</body>
</html>

[Cedcommerce · Accepted solution]

Hello @sundayflea, 

This issue can be resolved with a custom code. 

Add the below-provided code before the </head> tag in the theme.liquid file.

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

 <script>

   setTimeout(() => {

     console.log($("#MainContent .grid li.grid-item").text(), document.querySelector(".product-card"));

     $("#MainContent .grid .grid-view-item").hover(function(){

       $(this).find('.product-card__title').css('visibility', 'visible');

       $(this).find('.price--listing').css('visibility', 'visible');

     });

     $("#MainContent .grid .grid-view-item").mouseout(function(){       

       $(this).find('.product-card__title').css('visibility', 'hidden');

       $(this).find('.price--listing').css('visibility', 'hidden');

     });

   }, 1000);

 </script>

 <style>

   .product-card .product-card__title{

     visibility: hidden;

   }

   .product-card .price--listing{

     visibility: hidden;

   }

 </style>

Hope it helps. Let us know if you need any help from us. 

Regards, 

CedCommerce 

[ryanbrown26]

Hi, 

This does not seem to be working for me. Can you please assist.