Expand Card

				.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 */
}