html - 在悬停CSS上获取图像上的图标

Question

悬停时，我无法在图像右侧看到整个图标。(此表位于图片库中)

这是我应该得到的:

这是我的代码:

.text-wrapper:hover {
  background: rgb(112, 88, 42);
  opacity: 0.8;
  font-weight: bold;
  font-size: 12px;
  text-align: left;
  vertical-align: middle;
}

.image-cell:hover {
  text-align: left;
}

<a class="gallery-item" href="#"><img src="../images/04.jpg" alt="paper" style="width:20%"><span class="text-wrapper">
    <span class="name">
			
    <table>
    <tr>
    <td class="portfolio-cell">
      <div class="value">portfolio text</div>
    </td>
    <td class="image-cell">
      <i class="fa fa-eye fa-lg"></i>
    </td>
    </tr>
    <tr>
      <div class="">text2</div>
    </tr>
    </table>

Answer 1

您不需要使用 float: left/right 或表格来为您的布局创建该组件。您可以使用 flexbox，简单而强大，阅读更多相关信息。

你的情况 - 你可以用 :after 伪元素添加图标。简单示例 https://jsfiddle.net/ruoazom7/11/