22

✏️ Editing: ep-image-expand.css

.bdt-ep-image-expand{display:flex;height:460px}.bdt-ep-image-expand-item{position:relative;flex:1;transition:flex 1s;cursor:pointer}.skin--default .bdt-ep-image-expand-item,.skin--vertical .bdt-ep-image-expand-item{text-align:center;text-decoration:none;background-size:cover;background-position:center;background-repeat:no-repeat}.skin--default .bdt-ep-image-expand-item:before,.skin--vertical .bdt-ep-image-expand-item:before{content:'';position:absolute;height:100%;width:100%;background:rgba(0,0,0,0.3);left:0;top:0;transition:opacity .3s ease;z-index:0;opacity:0}.bdt-ep-image-expand-item.active{flex:100%}.bdt-ep-image-expand-item.active .bdt-ep-image-expand-content{opacity:1;transition-property:opacity;transition-delay:1.1s}.bdt-ep-image-expand-item.active:before{opacity:1}.bdt-ep-image-expand-item.active:hover{flex:100%}.bdt-ep-image-expand-item.active .bdt-ie-lightbox-wrap{opacity:1;transition-delay:.4s;visibility:visible}.bdt-ep-image-expand-item.active .bdt-ep-image-expand-img:before{opacity:1}.bdt-ep-image-expand-item:hover{flex:1.5}.bdt-ep-image-expand-content{position:absolute;padding:0 10px;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;max-width:1200px;text-align:left;opacity:0;transition-property:opacity;display:flex;flex-direction:column;justify-content:center;height:100%}.bdt-ep-image-expand-sub-title{color:#fff;margin-bottom:3px;font-weight:500;font-size:18px}.bdt-ep-image-expand-title{font-size:24px;font-weight:700;color:#fff;padding-bottom:15px;margin:0}.bdt-ep-image-expand-title *{color:inherit}.bdt-ep-image-expand-text{color:#fff;line-height:1.5em;padding-bottom:20px;font-size:15px}.bdt-ep-image-expand-text p{margin:0}.bdt-ep-image-expand-button{display:block;position:relative}.bdt-ep-image-expand-button a{display:inline-block;font-size:14px;font-weight:600;color:#fff;padding:8px 20px;background:#1e87f0;border-radius:3px;line-height:1}.bdt-ep-image-expand-button a:hover{background:#fff;color:#1e87f0}.skin--sliding-box .bdt-ep-image-expand-item{display:flex}.skin--sliding-box .bdt-ep-image-expand-img{position:relative;overflow:hidden;width:100%;transition:all .4s}.skin--sliding-box .bdt-ep-image-expand-img:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity .3s ease;z-index:1;opacity:0}.skin--sliding-box .bdt-ep-image-expand-img img{height:100%;width:100%;object-fit:cover;transition:all .4s linear}.skin--sliding-box .bdt-ep-image-expand-content{width:50%;transform:translate(0, -50%);left:auto}.skin--sliding-box .bdt-ep-image-expand-content *{color:#495157}.skin--sliding-box .bdt-ep-image-expand-item.active .bdt-ep-image-expand-img{width:50%}.skin--sliding-box .bdt-ep-image-expand-item.active .bdt-ep-image-expand-img img{transform:scale(1.1)}.skin--sliding-box .bdt-ep-image-expand-item.active .bdt-ep-image-expand-content{width:50%;margin-left:50%}.skin--sliding-box .bdt-ie-lightbox-wrap{top:50%;right:50%;transform:translate(50%, -50%)}.bdt-ie-lightbox-wrap{position:absolute;opacity:0;transition:all .4s ease;visibility:hidden;right:0;margin:10px;z-index:10}.bdt-ep-image-expand-lightbox{display:inline-flex;padding:10px;color:#fff;border:1px solid #fff;border-radius:100px;transition:all .3s ease}.bdt-ep-image-expand-lightbox i{transition:transform .3s ease}.bdt-ep-image-expand-lightbox:hover{color:#fff}.bdt-ep-image-expand-lightbox:hover i{transform:scale(1.1)}.ep-img-position--row-reverse .bdt-ep-image-expand-item.active .bdt-ep-image-expand-content{margin-right:50%;margin-left:auto}@media (min-width:768px){.bdt-ep-image-expand{height:640px}.bdt-ep-image-expand-content{padding:0 70px}.bdt-ep-image-expand-sub-title{font-size:22px}.bdt-ep-image-expand-title{font-size:48px}.bdt-ep-image-expand-text{padding-bottom:30px;font-size:16px}.bdt-ep-image-expand-button a{font-size:15px;padding:10px 25px}}@media (min-width:1024px){.bdt-ep-image-expand{height:720px}}@media (min-width:768px) and (max-width:1023px){.bdt-ep-image-expand-text.bdt-tablet{display:none}}@media (min-width:1024px){.bdt-ep-image-expand-text.bdt-desktop{display:none}}@media (max-width:767px){.bdt-ep-image-expand-text.bdt-mobile{display:none}}

MR SKB