将字体“Awesome”图标置于悬浮在图片上方 [英] Center a Font Awesome icon over the image on hover

问题描述

当鼠标悬停在图片上时，我试图将图片中的一个字体真棒图标居中。
这是我的HTML：

 < div class =profile-img-container> 
< img src =http://s3.amazonaws.com/37assets/svn/765-default-avatar.pngclass =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 {
 position：absolute; 
 top：0; 
 left：0; 
 bottom：0; 
 right：0; 
 margin：auto; 
} 
  

但是字体真棒图标是一直显示在左边和图标保持闪烁，当我悬停图像。
这是我的JSFiddle：
http://jsfiddle.net/fns8byfj/1/

解决方案

这里的用法很重要。这是一个触发器，所以我会在这里使用一个链接。我不会显示：无，因为当选择器上的状态是显示：none或者visibility：hidden时，IOS不会对这里的操作工作，即使：：hover更改此状态。使用不透明度和位置隐藏。

非常重要：

父项不是其中的子映像的大小，除非div是限制其宽度的内容的子项，或者div是浮动的或内联块。如果你把它放在网格中的一个列中，并且图像在任何视口宽度，与那个列一样宽，那么你可以删除.profile-img-container上的inline-block，但是如果你使用它独立的你必须浮动它或在它上面放一个.inline-block，但是你必须改变图像的响应性，如果父类是一个inline-block max-width：100％不工作（就像它如果在表格单元格内部工作）。

：hover不是一个好主意，我会使用jQuery通过切换父类的一个点击。 / p>

演示： http://jsfiddle.net/prtkqb44/

CSS：

  .profile-img- container {
 position：relative; 
 display：inline-block; / * added * / 
 overflow：hidden; / *添加* / 
} 
 
 .profile-img-container img {width：100％;} / *如果在网格系统中使用，删除* / 
 
 .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： b

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

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/

解决方案

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>

这篇关于将字体“Awesome”图标置于悬浮在图片上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！