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

Question

悬停时，我无法在图像的右侧部分显示整个图标。 （此表位于图库中）

这是我应该得到的：

这是我的代码：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您没有使用float: left/right或表来为您的布局创建该组件。你可以使用简单而强大的flexbox，阅读更多相关内容。

你的情况 - 你可以添加带有:after伪元素的图标。简单示例see here