Collections: Show product name on hover

Example:

This modification allows you to hide the product name as well as the price and star ratings. On hover, they will appear. 

Code:

/* -- code start -- */
@include at-query ($min, $large) {
  .product-grid-item .figcaption.hover .name_wrapper{
    opacity: 0;
    -ms-transform: translate(0px,10px); /* IE 9 */
    -webkit-transform: translate(0px,10px); /* Safari */
    transform: translate(0px,10px);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  }
  .product-grid-item:hover .figcaption.hover .name_wrapper{
    opacity: 1;
    -ms-transform: translate(0px,0px); /* IE 9 */
    -webkit-transform: translate(0px,0px); /* Safari */
    transform: translate(0px,0px);
  }
  .lt-ie9 .product-grid-item .figcaption.hover .name_wrapper{
    opacity: 1;
  }
}
/* - end - */

Be sure to also have the Show price on hover turned on under the Product grid settings:

Use Show price on hover:

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code