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