@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
1 lines • 4.52 kB
CSS
.vs-card-content.type-5 .vs-card{display:flex;justify-content:center;align-items:center;box-shadow:none;flex-direction:column}.vs-card-content.type-5 .vs-card:hover .vs-card__interactions{bottom:50px}.vs-card-content.type-5 .vs-card:hover .vs-card__text{transform:translate(0);opacity:1;box-shadow:0 0 30px 0 rgba(0,0,0,var(--vs-shadow-opacity))}.vs-card-content.type-5 .vs-card:hover .vs-card__img{border-radius:6px 40px 6px 40px}.vs-card-content.type-5 .vs-card:hover .vs-card__img img{transform:scale(1.1)}.vs-card-content.type-5 .vs-card__img{border-radius:6px 20px 6px 20px}.vs-card-content.type-5 .vs-card__interactions{bottom:6px;transition:all .25s ease;z-index:20}.vs-card-content.type-5 .vs-card__text{background:rgba(var(--vs-background),1);box-shadow:0 0 0 0 rgba(0,0,0,var(--vs-shadow-opacity));border-radius:6px 20px 6px 20px;margin-top:-50px;z-index:10;position:relative;width:calc(100% - 30px);padding-top:10px;transition:all .25s ease;transform:translate(0,25px);opacity:0}.vs-card-content.type-4 .vs-card{box-shadow:none;max-width:300px}.vs-card-content.type-4 .vs-card:hover{transform:translate(0,-5px)}.vs-card-content.type-4 .vs-card:hover .vs-card__img img{transform:scale(1)}.vs-card-content.type-4 .vs-card:hover .vs-card__text{padding-top:15px;padding-bottom:25px}.vs-card-content.type-4 .vs-card__img{align-items:center;max-height:600px}.vs-card-content.type-4 .vs-card__img img{transform:scale(1.2)}.vs-card-content.type-4 .vs-card__interactions{top:0;bottom:auto}.vs-card-content.type-4 .vs-card__text{background:rgba(var(--vs-background),.8);position:absolute;bottom:0;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-radius:0 0 20px 20px;transition:all .25s ease}.vs-card-content.type-4 .vs-card__text p{opacity:1}.vs-card-content.type-3 .vs-card{display:flex;max-width:400px}.vs-card-content.type-3 .vs-card:hover{transform:scale(1.04)}.vs-card-content.type-3 .vs-card__img img{min-width:200px}.vs-card-content.type-3 .vs-card__text{padding-top:15px}.vs-card-content.type-3 .vs-card__title h2,.vs-card-content.type-3 .vs-card__title h3,.vs-card-content.type-3 .vs-card__title h4,.vs-card-content.type-3 .vs-card__title h5,.vs-card-content.type-3 .vs-card__title h6{padding:0}.vs-card-content.type-2 .vs-card{box-shadow:none;overflow:hidden}.vs-card-content.type-2 .vs-card:hover{transform:scale(.95)}.vs-card-content.type-2 .vs-card:hover .vs-card__img img{transform:scale(1.15)}.vs-card-content.type-2 .vs-card:hover .vs-card__text{transform:translate(0);opacity:1;color:#fff}.vs-card-content.type-2 .vs-card__interactions{right:0;top:0;left:auto;bottom:auto;align-items:flex-end}.vs-card-content.type-2 .vs-card__title{position:relative;color:inherit;padding:0}.vs-card-content.type-2 .vs-card__title h2,.vs-card-content.type-2 .vs-card__title h3,.vs-card-content.type-2 .vs-card__title h4,.vs-card-content.type-2 .vs-card__title h5,.vs-card-content.type-2 .vs-card__title h6{padding:0;padding-bottom:5px}.vs-card-content.type-2 .vs-card__text{position:absolute;bottom:0;background:rgba(var(--vs-background),.9);padding-top:30px;border-radius:0 0 20px 20px;background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 100%);color:transparent;font-size:.9rem;transform:translate(0,45%);transition:all .25s ease}.vs-card-content.type-2 .vs-card__text p{opacity:1}.vs-card-content.type-1 .vs-card:hover{box-shadow:0 0 0 0 rgba(0,0,0,var(--vs-shadow-opacity));transform:translate(0,5px)}.vs-card-content.type-1 .vs-card:hover .vs-card__img img{transform:scale(1.15)}.vs-card{background:rgba(var(--vs-background),1);color:rgba(var(--vs-text),1);width:100%;max-width:350px;box-shadow:0 5px 20px 0 rgba(0,0,0,var(--vs-shadow-opacity));border-radius:20px;transition:var(--vs-transition-ease);cursor:pointer;position:relative}.vs-card__text{font-size:.85rem;padding:0 15px;padding-bottom:15px}.vs-card__text p{font-size:inherit;margin:0;opacity:.8}.vs-card__title{padding-top:10px;padding-bottom:5px}.vs-card__title h2,.vs-card__title h3,.vs-card__title h4,.vs-card__title h5,.vs-card__title h6{padding:0;margin:0;font-size:1.1rem}.vs-card__interactions{display:flex;justify-content:flex-start;align-items:center;position:absolute;bottom:0;left:0;padding:5px 10px}.vs-card__img{display:flex;justify-content:center;align-items:center;position:relative;max-height:250px;overflow:hidden;border-radius:20px;transition:var(--vs-transition-ease)}.vs-card__img img{width:100%;border-radius:inherit;display:block;transition:var(--vs-transition-ease)}