在图像上添加图标（用于删除和编辑图像信息）

Question

我有一个关于定义图片上图标位置的问题。 我目前的视觉效果：

我想有这样的事情：

并且在悬停时我希望有一个编辑图标，如下所示：

我现在的HTML：

<div class="artist-collection-photo">
                <button class="close" type="button">×</button>
                <a data-target="#photo-fields-5-0" data-toggle="modal">
                  <img width="120" height="120" alt="image.jpg" class="img-thumbnail">
                  </a>
                </div>

和css：

.artist-collection-photo {
  float: left;
  margin: 10px;
  cursor: pointer;
  width: 120px;
  height: 120px;
}

我很感激你的帮助，我对视觉部分很恐怖:(

PS：编辑了photoshop中的示例图像

谢谢！

Answer 1

http://www.bootply.com/IRZvpTK41g

您的包含div（照片）需要设置为相对位置，按钮X需要设置为position:absolute。调整测量值。要使按钮在悬停时更改颜色，只需添加button:hover伪类并更改颜色。

Answer 2

我认为这就是你想要的：https://jsfiddle.net/c259LrpL/30/

设置.artist-collection-photo {position: relative;}

然后设置.close{position: absolute;}

这会将按钮放在图像中，然后使用top: 0;和right: 0;

定位

.artist-collection-photo {
  float: left;
  margin: 10px;
  cursor: pointer;
  width: 120px;
  height: 120px;
  position: relative;
}
.close{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
}

对于您在此处看到的淡入淡出部分：https://jsfiddle.net/c259LrpL/31/

.img-thumbnail {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.img-thumbnail:hover {
  opacity: 0.5;
}