JSFiddle - React, Tailwind, and code Playground

by _abl

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" />
    <div class="profile-img-i-container">
        <i class="fa fa-upload fa-5x"></i>
    </div>
</div>

CSS

.profile-img-container {
    height: 300px;
    width: 300px;
    line-height: 300px;
    position:relative;
}

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

.profile-img-container:not(:hover) .profile-img-i-container {
    display: none;
}

.profile-img-i-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 500;
    text-align:center;
}

.profile-img-i-container i {
    display:block;
    line-height: inherit;
}