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>

Answer 2

You can center it both horizontally and vertically using percentage widths, but this implies that you know approximately the width in percentages of the element you are trying to position, in this case the font-awesome one. Note that I aligned it approximately, positioning it to the left and top by 45%.

I've updated your code with the above-mentioned part, and by also applying the hover effect on the containing DIV such that the font-awesome icon does not flicker. It flickered because when you were hovering over it, the hover over the image was being lost.

The HTML remains, the same, only the style differs:

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

.profile-img-container i {
    position: absolute;
    top: 45%;  
    left: 45%;
    transform: translate(-45%, -45%);
    display: none;
}

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

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

Your updated JSFiddle.

Answer 3

The following solution should work, as long as you can afford to have fixed widths in the topmost container (in the example, 300px) or otherwise manage to have a line-height value which is always equal to the rendered height of the image.

The solution exploits the line-height and text-align properties to achieve vertical and horizontal positioning, respectively.

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

.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;
}

Fiddle

About the flickering:

Be careful with :hover. In your example you had the following snippet:

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

This causes the i element to appear when you hover the image. Then the i element is placed on top of the image, so you're not longer hovering the image, but the i element. The icon hides again, and you are again hovering the image. This is what caused the flickering effect. The solution is to work with the :hover property of the topmost element.

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

Answer 4

I have changed the position of .profile-img-container to absolute and set it's width to 50% (you can adjust the width to change the image size).

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

because of the flickering effect, you must set your img z-index higher than the z-index of i.

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

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

I have changed the position of i to absolute and centered it using margin-left and margin-top

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

And finally I changed the position of img to absolute

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

Try this code: http://jsfiddle.net/fns8byfj/16/