CODEWITHSUNDEEP
htmlcsstwitter-bootstraphover
Vesselina Taneva
Vesselina Taneva

Reputation: 115

Display another div on hover

How can I expand a hidden-by-default div when I hover on the parent div? Something like is shown in the attached picture.

<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/[email protected]" />
            <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/[email protected]" />
            <br /> First div
        </div>

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

enter image description here

Upvotes: 1

Views: 67

Answers (3)

Subhash Chavda
Subhash Chavda

Reputation: 86

Here is css if you dont want to change your code

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

Upvotes: 0

aflyzer
aflyzer

Reputation: 563

*{
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/[email protected]" />
            <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/[email protected]" />
            <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>

Something like this? Content is vertically and horizontally centered here

Upvotes: 0

TylerH
TylerH

Reputation: 21086

Quick and dirty implementation (assuming you're using Bootstrap here); there will be better ones, I'm sure.

.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/[email protected]" />

        <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/[email protected]" />

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

Upvotes: 4

Related Questions