.sp-smart-post-slider { .sp-smart-post-swiper { .swiper-wrapper { padding-bottom: 0; .sp-smart-post-card { overflow: hidden; } } &.post-slider-layout-one { .sp-smart-post-template-one-content { width: 100%; height: 100%; display: flex; justify-content: center; position: absolute; } } &.post-slider-layout-two { .sp-smart-post-template-one-content { width: 100%; height: 100%; display: flex; justify-content: center; position: absolute; .sp-smart-post-card-content { padding-right: 10%; } } } &.post-slider-layout-three { display: flex; justify-content: center; align-items: flex-end; .sp-smart-post-template-one-content { position: absolute; .sp-smart-post-card-content { position: absolute; min-height: 50%; } } } &.post-slider-layout-four { display: flex; justify-content: flex-end; align-items: center; .sp-smart-post-template-one-content { display: flex; // flex-direction: column; align-items: center; height: 75%; justify-content: center; position: absolute; z-index: 2; } } &.post-slider-layout-five { &.content-left { .sp-smart-post-card-image { .image-overlay { width: 50%; left: 0; } } .sp-smart-post-template-one-content { left: 0; } } &.content-right { .sp-smart-post-card-image { .image-overlay { width: 50%; left: 50%; } } .sp-smart-post-template-one-content { left: 50%; } } .sp-smart-post-template-one-content { display: flex; height: inherit; justify-content: center; position: absolute; z-index: 6; width: 50%; .sp-smart-post-card-content { width: 100%; } } } &.post-slider-layout-four { .sp-smart-post-swiper-nav-arrow { top: 79%; left: 50%; right: 100%; } } &.post-slider-layout-five { .sp-smart-post-swiper-nav-arrow { top: 100%; transform: translateY(-170%); left: 70%; right: 24%; } } &.post-slider-layout-five { .sp-smart-post-template-one-content { &.left { position: absolute; align-items: flex-start; top: 0; left: 0; } &.center { display: flex; flex-direction: column; align-items: center; } } } &.post-slider-layout-one { .sp-smart-post-swiper-nav-arrow { top: 50%; } } } .sp-smart-post-pagination-dots { left: 50%; transform: translateX(-50%); } .sp-background-image-wrapper { position: relative; height: 100%; width: 100%; } .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn.btn-prev { left: 30px; } .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn.btn-next { left: calc(100% - 30px); } .post-slider-layout-five+.sp-smart-post-swiper-nav-arrow { top: 95%; } .post-slider-layout-five+.sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn.btn-prev { left: 63%; } .post-slider-layout-five+.sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn.btn-next { left: 65%; } } .sp-smart-post-slider .sp-swiper-fade .swiper-slide.sp-slide-item { opacity: 0 !important; } .sp-smart-post-slider .sp-swiper-fade .swiper-slide.swiper-slide.sp-slide-item.swiper-slide-active { opacity: 1 !important; } .sp-smart-post-slider .sp-smart-post-swiper-nav-arrow-btn i { background: transparent; border-color: #FFF; } // // title animate effect.................................................. .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title { position: relative; display: inline-block; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:after { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title::before { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title .line { position: relative; display: inline-block; padding-bottom: 2px; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title .line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; // height: 2px; // background: linear-gradient(90deg, #ff416c, #ff4b2b); // transform-origin: left; transform: scaleX(0); transition: transform 0.4s ease; z-index: -1; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line::after { transform: scaleX(1); } /* Using :nth-of-type to target only .line elements */ .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after { transition-delay: 0s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after { transition-delay: 0.2s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after { transition-delay: 0.4s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after { transition-delay: 0.6s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after { transition-delay: 0.8s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after { transition-delay: 1s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after { transition-delay: 1.2s; } .sp-smart-post-slider .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after { transition-delay: 1.4s; }