Storefront product title on hover option

Question

I am using Storefront Galleria Child Theme.

The problem is that on my products page https://www.mangoblogger.com/services/ the product titles/price disappear at 768 px and only appear back on hover.

I would like them to show all the time and remove the hover effect altogether.

I managed to remove the hover effect in media queries but could not get the title to show on screens > 768 px

Answer 1

The titles are hidden because of an opacity: 0 setting on the g-product-title class. You can override that behavior by adding this rule somewhere after your theme's CSS file gets loaded (either in a later CSS file or in a <style> tag):

@screen and (min-width: 768px) {
  .site-main ul.products li.product .g-product-title {
    opacity: 1;
  }
}

However, this will also make the "Add to Cart" button show up all the time, so if you don't desire that behavior, you can add a rule that makes the button show up on hover only:

@screen and (min-width: 768px) {
  .site-main ul.products li.product .button {
    opacity: 0;
  }
  .site-main ul.products li.product:hover .button {
    opacity: 1;
  }
}

I personally think it looks better that way.