JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
                    <div class="profile-img-container">
                        <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
                        <i class="fa fa-upload fa-5x"></i>
                    </div>

CSS

.profile-img-container {
    position: absolute;
    width:50%;
}

.profile-img-container img:hover {
    opacity: 0.5;
    z-index: 501;
}

.profile-img-container img:hover + i {
    display: block;
    z-index: 500;
}

.profile-img-container i {
    display: none;
    position: absolute;
    margin-left:43%;
    margin-top:40%;
}

.profile-img-container img {
    position:absolute;
}