Expand
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
View CSS
View HTML
.content {
padding: 10px;
}
.title {
cursor: pointer;
padding: 10px 25px;
border-radius: 5px;
transition: border-radius ease-in-out 1s, background-color ease .5s;
}
.title:hover {
border-radius: 0;
}
.box-2 {
background: rgb(241, 241, 241);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
border-radius: 5px;
color: #353535;
margin: 20px;
width: 200px;
}
@media (min-width:1024px) {
/* expand */
.box-2 {
box-shadow: none;
border-radius: 0;
background: #353535;
color: #fff;
width: 250px;
height: 40px;
overflow: hidden;
max-height: 250px;
transition: box-shadow ease-in 1s ,background-color ease-in .5s, width ease-out 1s, border-radius ease-in-out 1s, height ease 1s;
}
.box-2:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.288);
background: rgb(241, 241, 241);
width: 600px;
height: 100%;
border-radius: 5px;
}
.box-2 > .content {
height: 0;
transition: height ease-in-out 1s, opacity ease-in-out .5s;
opacity: 0;
color: #353535;
background: rgb(241, 241, 241);
}
.box-2:hover > .content {
height: 250px;
opacity: 1;
}
.box-2:hover > .title {
color: #353535;
}
/* expand end */
}
<div class="box-2">
<div class="title">Expand</div>
<div class="content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
</div>