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: relative;
}

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

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

    .profile-img-container i {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }