PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / blocks / thumbnail-slider / style.scss

style.scss in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/thumbnail-slider/style.scss

947 lines 29.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sp-smart-post-thumbnail-slider {
2 .sp-smart-post-swiper2 {
3 margin-top: 20px;
4
5 .swiper-wrapper {
6 .sp-slide-item-thumb {
7
8 // padding: 0 4px;
9 .sp-smart-post-card-image {
10 &::after {
11 content: '';
12 position: absolute;
13 top: 0;
14 right: 0;
15 bottom: 0;
16 left: 0;
17 width: 100%;
18 height: inherit;
19 background: #000;
20 opacity: 0.5;
21 z-index: 9;
22 }
23
24 // &.template-one::after {
25 // opacity: 0;
26 // }
27 .sp-smart-post-template-one-content {
28 z-index: 10;
29 }
30
31 .sp-background-image-styles-template-two {
32 &::after {
33 content: '';
34 visibility: hidden;
35 }
36 }
37 }
38
39 &.swiper-slide-thumb-active {
40
41 .sp-smart-post-card-image {
42 &::after {
43 content: '';
44 // visibility: hidden;
45 opacity: 0;
46 transition: opacity .3s ease-in-out;
47 }
48
49 .sp-background-image-styles-template-two {
50 &::after {
51 content: '';
52 opacity: 0;
53 transition: opacity .3s ease-in-out;
54 }
55 }
56 }
57 }
58
59 .sp-smart-post-card-image {
60 .image-overlay {
61 display: none;
62 }
63 }
64
65 .sp-background-image-wrapper {
66 .image-overlay {
67 opacity: 0;
68 }
69 }
70 }
71 }
72 }
73 }
74
75 .sp-smart-post-block-wrapper {
76 &.sp-smart-post-thumbnail-slider {
77 display: flex;
78
79 .sp-smart-post-thumbnail-thumb {
80 .sp-smart-post-swiper2 {
81 .template-one {
82 .sp-smart-post-template-one-content {
83 .sp-smart-post-title {
84 font-size: 14px !important;
85 font-weight: 500 !important;
86 line-height: 130% !important;
87 text-align: left;
88 }
89 }
90 }
91 }
92 }
93
94 // .sp-smart-post-swiper-nav-arrow {
95 // padding: 0 30px;
96 // }
97 // .sp-smart-post-swiper-nav-arrow .btn-prev,
98 // .sp-smart-post-swiper-nav-arrow .btn-next {
99 // left: 0;
100 // }
101
102 &.sp-thumbnail-top {
103 flex-direction: column-reverse;
104
105 .sp-smart-post-thumbnail-thumb {
106 .sp-smart-post-swiper2 {
107 margin-top: 0;
108
109 .template-one {
110 height: 100px;
111 display: flex;
112 position: relative;
113
114 ul {
115 justify-content: left !important;
116
117 li a:hover {
118 color: #fff !important;
119 }
120 }
121
122 .sp-smart-post-card-image {
123 width: 40% !important;
124 height: inherit;
125 position: absolute;
126 left: 0;
127
128 a {
129 display: block;
130 height: 100%;
131
132 img {
133 width: 100%;
134 height: 100% !important;
135 }
136 }
137 }
138
139 .sp-smart-post-template-one-content {
140 height: 100%;
141 width: 60%;
142 position: absolute;
143 right: 0;
144
145 .sp-smart-post-card-content {
146 text-align: left;
147 justify-content: center;
148 align-items: flex-start;
149 width: 100%;
150 height: 100%;
151 padding: 10px !important;
152
153 .sp-smart-post-category {
154 a {
155 padding: 0 !important;
156 background: transparent !important;
157 font-size: .75rem;
158 }
159 }
160 }
161
162 .sp-smart-post-details,
163 .sp-smart-post-read-more-button,
164 .sp-smart-post-social-share {
165 display: none;
166 }
167
168 }
169 }
170 }
171 }
172 }
173
174 &.sp-thumbnail-right {
175 flex-direction: row;
176
177 .sp-smart-post-thumbnail-slide {
178 width: 75%;
179 }
180
181 .sp-smart-post-thumbnail-thumb {
182 width: 25%;
183
184 .sp-smart-post-swiper2 {
185 height: 100%;
186 margin-top: 0;
187
188 .template-one {
189 height: 100px;
190 display: flex;
191 position: relative;
192
193 ul {
194 justify-content: left !important;
195
196 li a:hover {
197 color: #fff !important;
198 }
199 }
200
201 .sp-smart-post-card-image {
202 width: 40% !important;
203 height: inherit;
204 position: absolute;
205 left: 0;
206
207 a {
208 display: block;
209 height: 100%;
210
211 img {
212 width: 100%;
213 height: 100% !important;
214 }
215 }
216 }
217
218 .sp-smart-post-template-one-content {
219 height: inherit;
220 width: 60%;
221 position: absolute;
222 right: 0;
223
224 .sp-smart-post-card-content {
225 text-align: left;
226 justify-content: center;
227 align-items: flex-start;
228 width: 100%;
229 height: inherit;
230 padding: 10px !important;
231
232 .sp-smart-post-category {
233 a {
234 padding: 0 !important;
235 background: transparent !important;
236 font-size: .75rem;
237 }
238 }
239 }
240
241 .sp-smart-post-details,
242 .sp-smart-post-read-more-button,
243 .sp-smart-post-social-share {
244 display: none;
245 }
246
247 // .sp-smart-post-read-more-button {
248 // display: none;
249 // }
250
251 // .sp-smart-post-social-share {
252 // display: none;
253 // }
254 }
255 }
256 }
257 }
258 }
259
260 &.sp-thumbnail-bottom {
261 flex-direction: column;
262
263 .sp-smart-post-swiper2 {
264 margin-top: 0;
265
266
267 .template-one {
268 height: 100px;
269 display: flex;
270 position: relative;
271
272 ul {
273 justify-content: left !important;
274
275 li a:hover {
276 color: #fff !important;
277 }
278 }
279
280 .sp-smart-post-card-image {
281 width: 40% !important;
282 height: inherit;
283 position: absolute;
284 left: 0;
285
286 a {
287 display: block;
288 height: 100%;
289
290 img {
291 width: 100%;
292 height: 100% !important;
293 }
294 }
295 }
296
297 .sp-smart-post-template-one-content {
298 height: 100%;
299 width: 60%;
300 position: absolute;
301 right: 0;
302
303 .sp-smart-post-card-content {
304 text-align: left;
305 justify-content: center;
306 align-items: flex-start;
307 width: 100%;
308 height: 100%;
309 padding: 10px !important;
310
311 .sp-smart-post-category {
312 a {
313 padding: 0 !important;
314 background: transparent !important;
315 font-size: .75rem;
316 font-weight: 400;
317 }
318 }
319 }
320
321 .sp-smart-post-details,
322 .sp-smart-post-read-more-button,
323 .sp-smart-post-social-share {
324 display: none;
325 }
326
327 // .sp-smart-post-read-more-button {
328 // display: none;
329 // }
330
331 // .sp-smart-post-social-share {
332 // display: none;
333 // }
334 }
335 }
336 }
337 }
338
339 &.sp-thumbnail-left {
340 flex-direction: row-reverse;
341
342 .sp-smart-post-thumbnail-slide {
343 width: 75%;
344 }
345
346 .sp-smart-post-thumbnail-thumb {
347 width: 25%;
348
349 .sp-smart-post-swiper2 {
350 height: 100%;
351 margin-top: 0;
352
353 .template-one {
354 height: 100px;
355 display: flex;
356 position: relative;
357
358 ul {
359 justify-content: left !important;
360
361 li a:hover {
362 color: #fff !important;
363 }
364 }
365
366 .sp-smart-post-card-image {
367 width: 40% !important;
368 height: inherit;
369 position: absolute;
370 left: 0;
371
372 a {
373 display: block;
374 height: 100%;
375
376 img {
377 width: 100%;
378 height: 100% !important;
379 }
380 }
381 }
382
383 .sp-smart-post-template-one-content {
384 height: inherit;
385 width: 60%;
386 position: absolute;
387 right: 0;
388
389 .sp-smart-post-card-content {
390 text-align: left;
391 justify-content: center;
392 align-items: flex-start;
393 width: 100%;
394 height: 100%;
395 padding: 10px !important;
396
397 .sp-smart-post-category {
398 a {
399 padding: 1px 3px !important;
400 background: transparent !important;
401 font-size: .75rem;
402 }
403 }
404 }
405
406 .sp-smart-post-details,
407 .sp-smart-post-read-more-button,
408 .sp-smart-post-social-share {
409 display: none;
410 }
411
412 // .sp-smart-post-read-more-button {
413 // display: none;
414 // }
415
416 // .sp-smart-post-social-share {
417 // display: none;
418 // }
419 }
420 }
421 }
422 }
423 }
424
425 .sp-smart-post-thumbnail-slide {
426 display: block;
427 }
428
429 .sp-smart-post-thumbnail-thumb {
430 display: block;
431
432 .sp-smart-post-card.template-one .sp-smart-post-card-image {
433 height: 100% !important;
434 }
435 }
436
437 .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb {
438 cursor: pointer;
439 }
440
441 // Thumbnail left positioning.
442 &.thumbnail-slider-layout-five,
443 &.thumbnail-slider-layout-three,
444 &.thumbnail-slider-layout-two {
445 &.sp-thumbnail-left {
446 .sp-smart-post-thumbnail-slide {
447 .sp-slide-item {
448 .sp-smart-post-card-content {
449 margin-left: 25%;
450 }
451 }
452 }
453
454 .sp-smart-post-pagination-dots {
455 margin-left: 12%;
456 }
457 }
458
459 &.sp-thumbnail-right {
460 .sp-smart-post-thumbnail-slide {
461 .sp-slide-item {
462 .sp-smart-post-card-content {
463 margin-right: 25%;
464 }
465 }
466 }
467
468 .sp-smart-post-pagination-dots {
469 margin-left: -12%;
470 }
471 }
472 }
473
474 &.thumbnail-slider-layout-six,
475 &.thumbnail-slider-layout-four,
476 &.thumbnail-slider-layout-one {
477 &.sp-thumbnail-left {
478 .sp-smart-post-pagination-dots {
479 margin-left: 12%;
480 }
481 }
482
483 &.sp-thumbnail-right {
484 .sp-smart-post-pagination-dots {
485 margin-left: -12%;
486 }
487 }
488 }
489
490 .sp-smart-post-swiper2 {
491 .sp-smart-post-card-content {
492 div:has(.sp-smart-post-excerpt) {
493 display: none;
494 }
495
496 a:has(.sp-smart-post-title) {
497 pointer-events: none;
498 }
499
500 .sp-smart-post-category {
501 pointer-events: none;
502 }
503 }
504 }
505 }
506 }
507
508 .sp-smart-post-thumbnail-slider {
509
510 .sp-smart-post-thumbnail-thumb .sp-smart-post-swiper2.sp-smart-post-background-layout .sp-smart-post-card-content,
511 .sp-smart-post-swiper2 .sp-slide-item-thumb .sp-smart-post-product-add-to-cart {
512 display: none;
513 }
514
515 .sp-smart-post-thumbnail-thumb .sp-smart-post-swiper2:not(.sp-smart-post-background-layout) .sp-smart-post-card-content {
516 display: block;
517 padding: 8px !important;
518 text-align: left !important;
519
520 .sp-meta-data {
521 display: none;
522 }
523 }
524 }
525
526 .sp-smart-post-thumbnail-slider {
527
528 .sp-smart-post-block-wrapper.thumbnail-slider-layout-three .sp-smart-post-swiper2 .sp-smart-post-card,
529 .sp-smart-post-block-wrapper.thumbnail-slider-layout-four .sp-smart-post-swiper2 .sp-smart-post-card {
530 display: flex;
531 flex-direction: row;
532 column-gap: 0px !important;
533
534 .sp-smart-post-card-image {
535 width: 40%;
536 height: 100%;
537 border: none !important;
538 border-radius: 0 !important;
539 flex-shrink: 0;
540
541 a {
542 display: block;
543 height: 100%;
544
545 img {
546 width: 100%;
547 height: 100% !important;
548 }
549 }
550 }
551
552 .sp-smart-post-template-one-content {
553 width: 60%;
554
555 .sp-smart-post-card-content {
556 height: 100%;
557 display: flex;
558 flex-direction: column;
559 justify-content: center;
560 align-items: flex-start !important;
561
562 .sp-smart-post-category {
563 justify-content: flex-start;
564
565 .post-categories a {
566 background: transparent !important;
567 padding: 0 !important;
568 margin-bottom: 6px;
569 }
570 }
571
572 .sp-smart-post-title {
573 font-size: 14px !important;
574 font-weight: 500 !important;
575 line-height: 18px !important;
576 }
577 }
578 }
579 }
580
581 .thumbnail-slider-layout-six {
582 .sp-smart-post-thumbnail-slide {
583 .sp-smart-post-card-image {
584 border: none !important;
585 border-radius: 0 !important;
586 }
587 }
588
589 .sp-smart-post-card {
590 &.content-left {
591
592 .sp-smart-post-template-one-content,
593 .image-overlay {
594 width: 50%;
595 left: 0;
596 }
597 }
598
599 &.content-right {
600
601 .sp-smart-post-template-one-content,
602 .image-overlay {
603 left: 50%;
604 width: 50%;
605 }
606 }
607
608 .sp-smart-post-template-one-content {
609 .sp-smart-post-category,
610 .sp-smart-post-details {
611 justify-content: flex-start;
612 }
613 }
614 }
615 }
616 }
617
618 .sp-smart-post-thumbnail-slider {
619 .sp-smart-post-pagination-dots.swiper-pagination-vertical {
620 flex-direction: column;
621 transform: translateX(0px);
622 top: 50%;
623 transform: translateY(-50%);
624 }
625 }
626
627 .sp-smart-post-thumbnail-slider {
628
629 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-two,
630 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-three,
631 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-five {
632 position: relative;
633 }
634
635 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-five.sp-thumbnail-left .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb,
636 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-five.sp-thumbnail-right .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb {
637 width: calc(50% - 10px);
638 }
639
640 // .sp-smart-post-thumbnail-slide .sp-smart-post-swiper.thumbnail-slider-layout-six .sp-smart-post-template-one-content {
641 // transition: all 0.3s ease-in-out;
642 // }
643 .sp-smart-post-card .sp-smart-post-template-one-content .sp-smart-post-card-content {
644 max-width: 100%;
645 }
646
647 .thumbnail-slider-layout-six .sp-smart-post-card .sp-smart-post-template-one-content .sp-smart-post-card-content {
648 width: 100%;
649 }
650
651 .sp-thumbnail-top .thumbnail-slider-layout-five .sp-smart-post-card-content {
652 padding-top: 15%;
653 }
654
655 .sp-thumbnail-bottom .thumbnail-slider-layout-five .sp-smart-post-card-content {
656 padding-bottom: 100px;
657 }
658
659 .sp-thumbnail-left .thumbnail-slider-layout-five .sp-smart-post-card-content,
660 .sp-thumbnail-right .thumbnail-slider-layout-five .sp-smart-post-card-content {
661 padding-left: 30%;
662 }
663
664 .sp-smart-post-card.thumbnail-slider-layout-six .sp-smart-post-template-one-content {
665 overflow: hidden;
666 }
667
668 .sp-smart-post-card .sp-smart-post-template-one-content .sp-smart-post-card-content {
669 border: none;
670 border-radius: 0;
671 }
672
673 .sp-smart-post-thumbnail-slide .sp-smart-post-swiper.thumbnail-slider-layout-six .sp-smart-post-template-one-content,
674 .sp-smart-post-swiper2 .sp-slide-item-thumb .sp-smart-post-category ul li a,
675 .sp-smart-post-swiper2 .sp-slide-item-thumb .sp-smart-post-category a,
676 .sp-smart-post-swiper2 .sp-slide-item-thumb .sp-smart-post-card-content .sp-smart-post-title {
677 transition: all 0.3s ease-in-out;
678 }
679
680 .sp-smart-post-swiper2 .sp-slide-item-thumb .sp-smart-post-card-content .sp-smart-post-product-price {
681 text-align: left;
682 }
683
684 .sp-smart-post-background-layout .sp-smart-post-card,
685 .sp-smart-post-background-layout .sp-smart-post-card:hover {
686 background: transparent;
687 }
688
689 .sp-smart-post-swiper2 .sp-slide-item-thumb .sp-smart-post-card-content {
690 transition: all 0.3s ease-in-out;
691 }
692 }
693
694 .sp-smart-post-thumbnail-slider {
695 .sp-smart-post-background-layout:not(.thumbnail-slider-layout-six) {
696
697 .sp-smart-post-template-one-content,
698 .sp-smart-post-template-one-content .sp-smart-post-card-content {
699 margin-left: auto;
700 margin-right: auto;
701 }
702 }
703
704 .thumbnail-slider-layout-one,
705 .thumbnail-slider-layout-two,
706 .thumbnail-slider-layout-five,
707 .thumbnail-slider-layout-six {
708 .sp-smart-post-thumbnail-thumb {
709 .sp-smart-post-category {
710 display: none;
711 }
712 }
713 }
714
715 .thumbnail-slider-layout-three,
716 .thumbnail-slider-layout-four {
717 .sp-smart-post-thumbnail-thumb {
718 .sp-smart-post-category {
719 position: static;
720 }
721 }
722 }
723
724 }
725
726 .sp-smart-post-thumbnail-slider {
727 @media screen and (max-width: 1023px) {
728
729 .sp-smart-post-thumbnail-slider.sp-thumbnail-right .sp-smart-post-pagination-dots,
730 .sp-smart-post-thumbnail-slider.sp-thumbnail-left .sp-smart-post-pagination-dots {
731 margin: 0;
732 bottom: 130px;
733 }
734
735 .sp-smart-post-thumbnail-slider.sp-thumbnail-right,
736 .sp-smart-post-thumbnail-slider.sp-thumbnail-left {
737 flex-direction: column;
738 }
739
740 .sp-smart-post-thumbnail-slider.sp-thumbnail-right .sp-smart-post-thumbnail-thumb,
741 .sp-smart-post-thumbnail-slider.sp-thumbnail-left .sp-smart-post-thumbnail-thumb {
742 width: 100%;
743 }
744
745 .sp-smart-post-thumbnail-slider.sp-thumbnail-right .sp-smart-post-thumbnail-slide,
746 .sp-smart-post-thumbnail-slider.sp-thumbnail-left .sp-smart-post-thumbnail-slide {
747 width: 100%;
748 margin: 0;
749 }
750 }
751
752 @media screen and (max-width: 767px) {
753 .sp-smart-post-thumbnail-slider .sp-smart-post-swiper-nav-arrow {
754 padding: 0px 0px;
755 }
756
757 .sp-smart-post-card .sp-smart-post-template-one-content .sp-smart-post-card-content {
758 max-width: 100%;
759 }
760
761 .sp-smart-post-thumbnail-slider .sp-smart-post-thumbnail-slide,
762 .sp-smart-post-thumbnail-slider.sp-thumbnail-right .sp-smart-post-thumbnail-thumb,
763 .sp-smart-post-thumbnail-slider.sp-thumbnail-left .sp-smart-post-thumbnail-thumb {
764 width: 100%;
765 }
766 .sp-smart-post-thumbnail-thumb,
767 .sp-smart-post-pagination-dots {
768 display: none !important;
769 }
770 .thumbnail-slider-layout-five .sp-smart-post-card .sp-smart-post-card-content {
771 padding-bottom: 10px !important;
772 }
773 .thumbnail-slider-layout-six .sp-smart-post-card .sp-smart-post-template-one-content,
774 .thumbnail-slider-layout-six .sp-smart-post-card .image-overlay {
775 width: 100% !important;
776 left: 0 !important;
777 }
778 }
779 }
780
781 .thumbnail-slider-layout-two .sp-smart-post-swiper2,
782 .thumbnail-slider-layout-three .sp-smart-post-swiper2,
783 .thumbnail-slider-layout-five .sp-smart-post-swiper2 {
784 margin: 16px 16px;
785 }
786
787 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-six.sp-thumbnail-right .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb.swiper-slide-thumb-active::after {
788 clip-path: polygon(0 0, 100% 50%, 0 100%);
789 left: -1px;
790 top: 50%;
791 transform: translateY(-50%);
792 width: 18px;
793 }
794
795 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-six.sp-thumbnail-bottom .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb.swiper-slide-thumb-active::after {
796 clip-path: polygon(51% 43%, 0 0, 100% 0);
797 top: -1px;
798 left: 50%;
799 transform: translateX(-50%);
800 width: 35px;
801 }
802
803 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-six.sp-thumbnail-left .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb.swiper-slide-thumb-active::after {
804 clip-path: polygon(100% 0, 0 50%, 100% 100%);
805 right: -1px;
806 top: 50%;
807 transform: translateY(-50%);
808 width: 18px;
809 }
810 .sp-smart-post-thumbnail-slider .sp-swiper-fade .swiper-slide.sp-slide-item {
811 opacity: 0 !important;
812 }
813
814 .sp-smart-post-thumbnail-slider .sp-swiper-fade .swiper-slide.sp-slide-item.swiper-slide-active {
815 opacity: 1 !important;
816 }
817 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-six .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb.swiper-slide-thumb-active::after {
818 position: absolute;
819 content: "";
820 background-color: #fff;
821 height: 35px;
822 z-index: 99;
823 }
824
825 .sp-smart-post-thumbnail-slider.thumbnail-slider-layout-six.sp-thumbnail-top .sp-smart-post-thumbnail-thumb .sp-slide-item-thumb.swiper-slide-thumb-active::after {
826 clip-path: polygon(50% 0, 100% 100%, 0 100%);
827 bottom: -1px;
828 left: 50%;
829 transform: translateX(-50%);
830 width: 35px;
831 height: 18px;
832 }
833 .sp-smart-post-thumbnail-slider .sp-smart-post-swiper-nav-arrow-btn i {
834 background: transparent;
835 border-color: #FFF;
836 }
837 .sp-smart-post-thumbnail-slider .sp-smart-post-pagination-fraction.swiper-pagination-horizontal {
838 transform: unset;
839 border: 1px solid var( --smart-post-secondary );
840 bottom: 180px;
841 }
842 .sp-smart-post-thumbnail-slider .sp-smart-post-pagination-dots.swiper-pagination-horizontal,
843 .sp-smart-post-thumbnail-slider .sp-smart-post-pagination-dynamic.swiper-pagination-horizontal,
844 .sp-smart-post-thumbnail-slider .sp-smart-post-pagination-strokes.swiper-pagination-horizontal,
845 .sp-smart-post-thumbnail-slider .sp-smart-post-pagination-numbers.swiper-pagination-horizontal {
846 bottom: 180px;
847 top: unset;
848 }
849 .sp-smart-post-thumbnail-slider .swiper-scrollbar-horizontal {
850 bottom: 12px;
851 top: unset;
852 }
853
854
855
856 // // title animate effect..................................................
857 // .sp-smart-post-thumbnail-slider .sp-smart-post-card .sp-smart-post-title {
858 // position: relative;
859 // display: inline-block;
860 // }
861
862 // .sp-smart-post-thumbnail-slider .sp-smart-post-card .sp-smart-post-title:after {
863 // content: "";
864 // position: absolute;
865 // transition: width 0.6s ease;
866 // }
867
868 // .sp-smart-post-thumbnail-slider .sp-smart-post-card .sp-smart-post-title::before {
869 // content: "";
870 // position: absolute;
871 // transition: width 0.6s ease;
872 // }
873
874
875
876
877
878
879 // // title animate effect..................................................
880 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title {
881 position: relative;
882 display: inline-block;
883 }
884
885 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:after {
886 content: "";
887 position: absolute;
888 transition: width 0.6s ease;
889 }
890
891 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title::before {
892 content: "";
893 position: absolute;
894 transition: width 0.6s ease;
895 }
896
897
898 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title .line {
899 position: relative;
900 display: inline-block;
901 padding-bottom: 2px;
902 }
903
904 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title .line::after {
905 content: '';
906 position: absolute;
907 bottom: 0;
908 left: 0;
909 width: 100%;
910 // height: 2px;
911 // background: linear-gradient(90deg, #ff416c, #ff4b2b);
912 // transform-origin: left;
913 transform: scaleX(0);
914 transition: transform 0.4s ease;
915 z-index: -1;
916 }
917 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line::after {
918 transform: scaleX(1);
919 }
920
921 /* Using :nth-of-type to target only .line elements */
922 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after {
923 transition-delay: 0s;
924 }
925
926 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after {
927 transition-delay: 0.2s;
928 }
929
930 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after {
931 transition-delay: 0.4s;
932 }
933
934 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after {
935 transition-delay: 0.6s;
936 }
937
938 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after {
939 transition-delay: 0.8s;
940 }
941 .sp-smart-post-thumbnail-slide .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after {
942 transition-delay: 1s;
943 }
944
945
946
947