ブートストラップにホバー効果を追加しますか？

Question

私はブートストラップにプロファイル画像構造を作成しました。

+ +のようなプラス記号の出現を許可するホバー効果を追加するにはどうすればよいですか？ユーザーに新しい画像などを追加できることを示します。

ありがとうございました。

@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

EDIT：がそれに:hoverを設定し、ちらつきを防止するために、親のdiv .profile-header-imgにIMGのwidthを与え、height：

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