t-fighting-design/theme/expand-card.css

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

.f-expand-card{display:flex;height:300px}.f-expand-card__item{flex:.5;background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;cursor:pointer;margin:10px;position:relative;transition:flex .5s ease-in;overflow:hidden}.f-expand-card__item.f-expand-card__round{border-radius:20px}.f-expand-card__item .f-expand-card__title{font-size:16px;color:#fff;position:absolute;bottom:20px;left:20px;transition:opacity .2s;opacity:0}.f-expand-card__item.f-expand-card__active{flex-grow:3;background-size:cover;background-position:center;background-repeat:no-repeat}.f-expand-card__item.f-expand-card__active .f-expand-card__title{opacity:1}