Center a Font Awesome icon over the image on hover

Question

I'm trying to center a font awesome icon over an image when the mouse is hovering the image. Here's my HTML:

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

And my 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 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

However the font awesome icon is somewhy displayed all the way to the left and the icon keeps flickering when I hover the image. Here's my JSFiddle: http://jsfiddle.net/fns8byfj/1/

Answer 1

The usage here is important to consider. This is a trigger, so I would use a link inside here. I would not display:none since IOS will not work on the actions inside this when the state on the selector was display:none or visibility:hidden even if the :hover changes this state. Use opacity and position to "hide it".

VERY IMPORTANT:

A parent is not the size of the child image inside it unless that div is the child of something that constrains its width or the div is floated or inline-block. If you put this in a column inside the grid and the image is, at any viewport width, as wide as that column, then you can remove the "inline-block" on the .profile-img-container however if you use it just stand alone you have to float it or put an .inline-block on it but then you have to change the responsiveness of the image if the parent is an inline-block max-width:100% doesn't work (just like it doesn't work if inside a table-cell).

:hover is not a good idea, I would use jQuery to make this a click by toggling the parent's class.

DEMO: http://jsfiddle.net/prtkqb44/

CSS:

.profile-img-container {
    position: relative;
    display: inline-block; /* added */
    overflow: hidden; /* added */
}

.profile-img-container img {width:100%;} /* remove if using in grid system */

.profile-img-container img:hover {
    opacity: 0.5
}
.profile-img-container:hover a {
    opacity: 1; /* added */
    top: 0; /* added */
    z-index: 500;
}
/* added */
.profile-img-container:hover a span {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}
/* added */
.profile-img-container a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}

HTML:

<div class="profile-img-container">
<img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" class="img-thumbnail img-circle img-responsive" />
    <a href="#"><span class="fa fa-upload fa-5x"></span></a>
</div>