css - 在 Bootstrap 中添加悬停效果？

Question

我在 Bootstrap 中创建了个人资料图片结构。

我想问一下如何添加一个悬停效果，它允许出现一个加号，比如 = + ，它向用户表明他们可以添加一个新图像或类似的东西。

谢谢。

@import url( 'https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 <div class="form-group text-center" data-type="admins operators secretaries customers">
          <div class="profile-image-container">
             <div class="profile-header-img">
              <img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
              <!-- badge -->
             <div data-content="">
              <span class="label label-primary rank-label" style="font-size: 13px;">
              <label id="total-points">0</label>Points  </span>
             </div>
            </div>

Answer 1

编辑: 给父 div .profile-header-img img 的 width 和 height 设置 :hover 并防止闪烁:

.profile-header-img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.glyphicon.glyphicon-plus-sign {
  display: none;
  color: white;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 44px;
  transform: translate(-50%, 0);
  font-size: 32px;
}
.profile-header-img:hover .glyphicon.glyphicon-plus-sign {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group text-center" data-type="admins operators secretaries customers">
  <div class="profile-image-container">
    <div class="profile-header-img">
      <img class="img-circle" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" />
      <span class="glyphicon glyphicon-plus-sign"></span>
      <!-- badge -->
      <div data-content="">
        <span class="label label-primary rank-label" style="font-size: 13px;">
          <label id="total-points">0</label>Points
        </span>
      </div>
    </div>
  </div>
</div>