在悬停时将图像上的字体真棒图标居中

Question

当鼠标悬停在图像上时,我正试图将字体上的字体真棒图标居中.这是我的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>

我的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/

Answer 1

这里的用法很重要.这是一个触发器,所以我会在这里使用一个链接.我不会显示:none,因为当选择器上的状态为display:none或visibility:hidden时,即使:hover更改此状态,IOS也无法处理此内部的操作.使用不透明度和位置"隐藏".

很重要:

父元素不是其中子图像的大小,除非div是约束其宽度或div浮动或内联块的东西的子元素.如果你把它放在网格内的一列中,并且图像是,在任何视口宽度,与该列一样宽,那么你可以删除.profile-img-container上的"inline-block"但是如果你只使用它单独你必须浮动它或在它上面放一个.inline-block但是如果父是一个内联块最大宽度你必须改变图像的响应性:100%不起作用(就像它没有如果在表格单元格内,则无效.

:悬停不是一个好主意,我会使用jQuery通过切换父类来实现这一点.

演示: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

您可以使用百分比宽度水平和垂直居中,但这意味着您大致知道要尝试定位的元素的宽度百分比,在这种情况下是字体非常棒的.请注意,我将其大致对齐,将其定位在左侧和顶部45%.

我已经使用上面提到的部分更新了代码,并且还在包含DIV上应用了悬停效果,使得字体真棒图标不会闪烁.它闪烁,因为当你在它上面盘旋时,悬停在图像上的东西正在丢失.

HTML仍然是相同的,只有样式不同:

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

你更新的JSFiddle.