相关疑难解决方法(0)

我目前正在创建一个图库(使用Zurb Foundation作为框架),并希望在图像悬停上显示缩放图标(如下例所示:http://codepen.io/Twikito/pen/Jeaub).但我希望这个图标是一个字体(Font Awesome)图标而不只是一个而是3个可点击的图标..这可能吗？

在阅读悬停图像上的“中心字体真棒”图标及其相应答案后，我仍然无法使用离子图标复制此答案。

我正在使用的代码如下：

<div class="video-thumbnail">
  <img src="image here" />
  <i class="icon ion-play"></i>
</div>

我使用的 CSS 是：

.video-thumbnail {
  position: relative;
  margin: 0 auto;
  display: inline-block;
}

.video-thumbnail img {
  position: absolute;
}

.video-thumbnail i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

我已经把它放在彼此之上，但似乎找不到中间点。寻找水平和垂直居中。我不是在寻找任何悬停状态，只是图像上的一个明显图标。

谢谢！