add hover effect in bootstrap? - css

Question

I've created a profile picture structure in Bootstrap.
I want ask how can I add an hover effect which allows the apparition of a plus symbol, like = + , which indicates to the user that they can add a new image or something like it.
Thanks.
#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: gave parent div .profile-header-img the img's width and height to set :hover on it and prevent flickering:
.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>