在悬停时显示另一个div

Question

当我将鼠标悬停在父div上时，如何扩展默认隐藏的div？附件中显示了类似的内容。

<div class="row text-center">
    <div class="col-md-6 border" style="height: 100px; padding-top: 25px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Text</div>
    </div>

    <div class="col-md-6 border" style="height: 100px; padding-top: 25px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Text</div>
    </div>
</div>

Answer 1

快速而肮脏的实现（假设您在此处使用Bootstrap）；我敢肯定会有更好的。

.row-item {
    overflow: hidden;
}
.row-item img, .expandDiv {
    position: relative;
    transition: all 0.5s;
}

.expandDiv {
    top: 50%;
}

.row-item:hover img, .row-item:hover .expandDiv {
    transform: translate3d(0px, -200%, 0px);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
    <div class="col-md-6 border row-item" style="height: 100px; padding-top: 25px;">
        <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />

        <div class="expandDiv">Text</div>
    </div>
    <div class="col-md-6 border row-item" style="height: 100px; padding-top: 25px;">
        <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />

        <div class="expandDiv">Text</div>
    </div>
</div>

Answer 2

*{
box-sizing: border-box;
}
.border{
background:red;
text-align:center;
overflow:hidden;
border:1px solid black;
margin:10px;
}
.firstDiv, .expandDiv{
height:100px;
position:relative;
display: flex;
flex-direction:column;
justify-content: center;
flex-wrap: wrap;
align-content: center;
align-items:center;
transition: all .3s ease-out;
top:0;
padding:10px;
}
.firstDiv{

}
.border:hover .firstDiv{
 top:-100px;
}
.border:hover .expandDiv{
 top:-100px;
}

<div class="row text-center">
    <div class="col-md-6 border" style="height: 100px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ulla lobortis nibh urna</div>
    </div>

    <div class="col-md-6 border" style="height: 100px;">
        <div class="firstDiv">
            <img src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/icon22@1x.png" />
            <br /> First div
        </div>

        <div class="expandDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis nibh urna, ac luctus nunc pellentesque ut. Nam sollicitudin urna est, a rhoncus magna tempor non.</div>
    </div>
</div>

像这样？内容在此处垂直和水平居中

Answer 3

如果您不想更改代码，这里是css

.border{
    height:100px;
    width:100px;
    border:1px solid;
    overflow:hidden;
    position:relative;
}
.border:hover .firstDiv{
    top:-100%;
    transition:all 0.5s ease-in-out;
}
.border:hover .expandDiv{
    top:0;
    transition:all 0.5s ease-in-out;
}
.expandDiv,.firstDiv{
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    transition:all 0.5s ease-in-out;
    text-align:center;
    padding:10px 0px;
}
.expandDiv{
    top:100%;
}