div内的垂直对齐跨度@ 100％高度和悬停时的固定宽度（包括示例）

Question

我正在尝试在高度未知的 div 上方实现悬停时显示的隐藏元素。

这里有一个完美的例子：

http://issuu.com/

如果您向下滚动并将鼠标悬停在任何出版物图像上，它将显示一个半透明的叠加层，其中“立即阅读”字样在垂直和水平方向上完全居中对齐。在悬停时淡入淡出。

我正在努力做到这一点。

谢谢

Answer 1

这是一个使用 flexbox 的简单示例：http://jsfiddle.net/hj3gfwuk/

你的html：

<div class="parent">
    <div class="child">
        <p>Read now.</p>
    </div>
</div>

你的CSS：

html, body { height: 100%; }

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgrey;
  position: relative;
  height: 50%;
  width: 50%
}

.child {
    display: none;
    background-color: rgba(255,255,255,.5);
    height: 100%;
    width: 100%;
}

.parent:hover .child {
    display: flex;
    justify-content: center;
    align-items: center;
}

基本思想： 子元素（隐藏元素）的高度和宽度为父元素的 100%，并且背景具有一定的透明度。它最初用display: none; 隐藏当您将鼠标悬停在.parent 上时，.child 的css 会更改，并显示该元素。希望这会有所帮助！

Answer 2

Working Fiddle

这是我使用纯 html 和 css 的实现：

HTML

<div class="content">
    Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.Hello here is content.
    <div class="hiddenElement"></div>
    <div class="textElement">Read Now</div>
</div>

CSS

.content{
    width:200px;
    height:300px;
    background:#ccc;
    position:relative;
}
.hiddenElement,.textElement{
     position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    text-align:center;
    display:none;
}
.hiddenElement{

    background:#fff;
    opacity:0.6;
}
.textElement{
    opacity:1;
    top:50%;
}
.content:hover .hiddenElement,.content:hover .textElement{
    display:block;
}

希望对你有帮助

Answer 3

@pruber 解决方案不适用于我的 Internet Explorer。
在@devendrant 解决方案中，他正在修复line-height: 300px; 或者在问题中是div that the height is unknown. 试试这个演示：jsfiddle

html：

<div class="content">
    <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg"/>
    <div class="overlay">
    <span>Read more</span>
    </div>
</div>

css：

div.content{
    position:relative;
}
div.content:hover div.overlay{
    display:block;
}
div.overlay{
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    color: #000;
    background-color: rgba(255,255,255,0.7);
}
div.overlay span{
    top: 50%;
    left:50%;
    position: absolute;
    margin-top: -9px;
    margin-left: -35px;
}