CSS Code
selector{
height: 300px;
overflow: hidden;
}
selector .inner-box__hover-box{
height: 100%;
display: flex;
align-items: center;
}
selector .learn-btn{
transform: translateY(35px);
transition: all .3s ease
}
selector:hover .learn-btn{
transform: translateY(-35px);
}
selector .box-des{
transition: all .2s ease;
opacity: 0;
}
selector:hover .box-des{
opacity: 1;
}
selector .box-content{
height: 50px;
overflow: hidden;
transition: all .3s ease;
}
selector:hover .box-content{
height: 130px;
}
@media(max-width:1024px){
selector .box-content{
height: 25px;
}
selector:hover .box-content{
height: 140px;
}
selector{
height: 280px;
overflow: hidden;
}
}
@media(max-width:767px){
selector .box-content{
height: 23px;
}
selector:hover .box-content{
height: 115px;
}
selector{
height: 250px;
overflow: hidden;
}
}