将鼠标悬停在描述woocommerce上

我有一个搜索，有一些涉及到我的查询，虽然他们不是那么具体，也尝试了一些插件，但似乎不为我点击。

我的目标是当用户在商店页面上时，他们可以将鼠标悬停在缩略图上，通过从该产品缩略图中抓取数据来查看该产品的描述。

示例(无悬停):

http://s22.postimg.org/yiedgbpep/Screen_Shot_2016_10_28_at_11_28_59.png

示例2 (hover): http://s17.postimg.org/49v85ev67/Screen_Shot_2016_10_28_at_11_29_33.png

我不介意自己做css，但这方面的功能是我挣扎的地方，因为我认为这将是常见的，有一个插件来使用它开始。

以上是我的主要问题，但如果它只是很容易回答这个问题的下一部分将是创建一个自定义类下的每个类别，所以它会为每个类别的特定颜色的样式，但第一个问题是我的主要问题。

我使用的是最新版本的Wordpress &WooCommerce .

再次感谢。

#box{
  width:50px;
  height:50px;
  background:yellow;
}
#box:hover {
  background:rgba(0,0,0,0.8);
  width:50px;
  overflow:hidden;
  height:50px;
  visibility:visible;
  cursor:pointer;
  }