PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.5.0
Easy Elements for Elementor – Addons & Website Templates v1.5.0
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / team-grid / css / team-grid.css

team-grid.css in Easy Elements for Elementor – Addons & Website Templates 1.5.0, at widgets/team-grid/css/team-grid.css

633 lines 16.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 :root {
3 --e-global-color-primary: #5933FF;
4 }
5
6 .eel-team-grid .grid-item {
7 box-sizing: border-box;
8 }
9 .eel-team-grid .grid-item .ee--team-img {
10 position: relative;
11 overflow: hidden;
12 border-radius: 16px;
13 transition: all 0.5s ease;
14 }
15 .eel-team-grid .grid-item .ee--team-img .eel-team-img-area {
16 position: relative;
17 z-index: 1;
18 overflow: hidden;
19 }
20 .eel-team-grid .grid-item .ee--team-img .eel-team-img-area .eel-team-img-box {
21 overflow: hidden;
22 border-radius: 16px;
23 margin: 0 auto;
24 }
25 .eel-team-grid .grid-item .ee--team-img .eel-team-img-area .eel-team-img {
26 width: 100%;
27 height: auto;
28 display: block;
29 margin: 0 auto;
30 position: relative;
31 transition: all 0.5s ease;
32 z-index: 0;
33 -o-object-fit: cover;
34 object-fit: cover;
35 }
36 .eel-team-grid .grid-item .ee--team-img .eel-team-img-area .eel-image-below-bg {
37 position: absolute;
38 top: 0;
39 left: 0;
40 width: 100%;
41 border-radius: 10px;
42 z-index: -1;
43 }
44 .eel-team-grid .grid-item .ee--team-img .eel-image-overlay {
45 position: absolute;
46 top: 0;
47 left: 0;
48 width: 100%;
49 height: 100%;
50 pointer-events: none;
51 border-radius: inherit;
52 transition: background 0.3s, opacity 0.3s;
53 z-index: 1;
54 }
55 .eel-team-grid .grid-item .ee--team-img .eel-name-deg-wrap {
56 background: #fff;
57 padding: 26px 24px 24px 24px;
58 border-radius: 8px;
59 text-align: center;
60 }
61 .eel-team-grid .grid-item .ee--team-img .eel-name-deg-wrap.inside {
62 position: absolute;
63 bottom: 24px;
64 left: 24px;
65 right: 24px;
66 z-index: 2;
67 }
68 .eel-team-grid .grid-item .ee--team-img .eel-name-deg-wrap .eel-name {
69 margin: 0 0 5px;
70 }
71 .eel-team-grid .grid-item .ee--team-img:hover img {
72 transform: scale(1.1);
73 }
74 .eel-team-grid.skin1 .ee--team-img {
75 display: flex;
76 align-items: center;
77 padding: 16px;
78 gap: 20px;
79 background: #F1F2FA;
80 }
81 .eel-team-grid.skin1 .ee--team-img .eel-team-left {
82 width: 50%;
83 }
84 .eel-team-grid.skin1 .ee--team-img .eel-team-right {
85 width: 50%;
86 }
87 .eel-team-grid.skin1 .ee--team-img .eel-team-right .eel-name-deg-wrap {
88 background: transparent;
89 padding: 0px 0px 20px;
90 border-radius: 0;
91 text-align: left;
92 color: #000;
93 }
94 .eel-team-grid.skin1 .ee--team-img .eel-team-right .eel-team-grid-social.default {
95 border-top: 1px solid #D9D9D9;
96 }
97 .eel-team-grid.skin1 .ee--team-img .eel-team-right .eel-team-grid-social.default ul {
98 justify-content: flex-start;
99 }
100 .eel-team-grid.skin2 .eel-team-img-area {
101 padding: 20px 20px 0;
102 }
103 .eel-team-grid.skin2 .eel-team-img-area .eel-image-below-bg {
104 height: 80%;
105 background: var(--e-global-color-primary);
106 }
107
108 .eel-team-grid-social {
109 position: relative;
110 }
111 .eel-team-grid-social .eel-team-social-hover {
112 transition: all 0.3s ease;
113 }
114 .eel-team-grid-social .eel-team-social-hover a,
115 .eel-team-grid-social ul li a:not(.eel-popup-trigger) {
116 background: var(--e-global-color-primary);
117 color: #fff;
118 transition: all 0.5s ease;
119 display: inline-flex;
120 align-items: center;
121 justify-content: center;
122 width: 32px;
123 height: 32px;
124 border-radius: 100%;
125 }
126 .eel-team-grid-social .eel-team-social-hover a svg,
127 .eel-team-grid-social ul li a:not(.eel-popup-trigger) svg {
128 fill: currentColor;
129 height: 1em;
130 }
131 .eel-team-grid-social .eel-team-social-hover a path,
132 .eel-team-grid-social ul li a:not(.eel-popup-trigger) path {
133 fill: currentColor;
134 }
135 .eel-team-grid-social .eel-team-social-hover a:hover,
136 .eel-team-grid-social ul li a:not(.eel-popup-trigger):hover {
137 background: #000;
138 transform: translateY(-5px);
139 }
140 .eel-team-grid-social ul {
141 list-style: none;
142 display: flex;
143 align-items: center;
144 gap: 1em;
145 margin: 0;
146 padding: 0;
147 }
148 .eel-team-grid-social.hover_show ul {
149 position: absolute;
150 transition: all 0.8s ease;
151 opacity: 0;
152 }
153 .eel-team-grid-social.hover_show:hover .eel-team-social-hover {
154 opacity: 0;
155 visibility: hidden;
156 }
157 .eel-team-grid-social.hover_show:hover ul {
158 z-index: 2;
159 opacity: 1;
160 }
161 .eel-team-grid-social.default {
162 padding-top: 20px;
163 }
164 .eel-team-grid-social.posi_left, .eel-team-grid-social.posi_right, .eel-team-grid-social.posi_botttom_left, .eel-team-grid-social.posi_botttom_right {
165 position: absolute;
166 z-index: 1;
167 }
168 .eel-team-grid-social.posi_left ul, .eel-team-grid-social.posi_right ul, .eel-team-grid-social.posi_botttom_left ul, .eel-team-grid-social.posi_botttom_right ul {
169 flex-direction: column;
170 gap: 10px;
171 }
172 .eel-team-grid-social.posi_left, .eel-team-grid-social.posi_right {
173 top: 16px;
174 }
175 .eel-team-grid-social.posi_left.hover_show ul, .eel-team-grid-social.posi_right.hover_show ul {
176 transform: translateY(-100%);
177 }
178 .eel-team-grid-social.posi_left.hover_show:hover ul, .eel-team-grid-social.posi_right.hover_show:hover ul {
179 transform: translateY(-40%);
180 }
181 .eel-team-grid-social.posi_botttom_left, .eel-team-grid-social.posi_botttom_right {
182 bottom: 16px;
183 }
184 .eel-team-grid-social.posi_botttom_left.hover_show ul, .eel-team-grid-social.posi_botttom_right.hover_show ul {
185 transform: translateY(50px);
186 }
187 .eel-team-grid-social.posi_botttom_left.hover_show:hover ul, .eel-team-grid-social.posi_botttom_right.hover_show:hover ul {
188 transform: translateY(-100%);
189 }
190 .eel-team-grid-social.posi_left, .eel-team-grid-social.posi_botttom_left {
191 left: 16px;
192 }
193 .eel-team-grid-social.posi_right, .eel-team-grid-social.posi_botttom_right {
194 right: 16px;
195 }
196
197 .eel-popup-modal {
198 display: none;
199 position: fixed;
200 z-index: 9999;
201 left: 0;
202 top: 0;
203 width: 100vw;
204 height: 100vh;
205 overflow: auto;
206 background: rgba(0, 0, 0, 0.5);
207 }
208
209 .eel-popup-content {
210 background: #fff;
211 position: fixed;
212 top: 50%;
213 left: 50%;
214 transform: translate(-50%, -50%);
215 padding: 40px 50px;
216 border-radius: 8px;
217 max-width: 550px;
218 box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
219 }
220
221 .eel-popup-close {
222 position: absolute;
223 top: 10px;
224 right: 16px;
225 font-size: 24px;
226 color: #888;
227 cursor: pointer;
228 }
229
230 .eel-popup-details {
231 font-size: 15px;
232 color: #333;
233 line-height: 1.6;
234 margin-top: 10px;
235 -webkit-user-select: none;
236 -moz-user-select: none;
237 user-select: none;
238 }
239
240 .eel-popup-header {
241 margin-bottom: 12px;
242 }
243
244 .eel-popup-name .eel-name {
245 font-size: 18px;
246 color: #222;
247 margin-bottom: 2px;
248 margin: 0 0 5px;
249 }
250
251 .eel-popup-designation {
252 font-size: 15px;
253 color: #888;
254 margin-bottom: 6px;
255 -webkit-user-select: none;
256 -moz-user-select: none;
257 user-select: none;
258 }
259
260 .eel-team-grid.skin3 .eel-team-img-box .eel-image-content {
261 position: absolute;
262 padding: 30px;
263 left: 0;
264 width: 100%;
265 height: 100%;
266 top: 0;
267 display: flex;
268 border-radius: inherit;
269 align-items: end;
270 overflow: hidden;
271 }
272 .eel-team-grid.skin3 .eel-team-img-box .eel-image-content .eel-description {
273 position: relative;
274 z-index: 2;
275 opacity: 0;
276 transition: opacity 0.4s ease;
277 }
278 .eel-team-grid.skin3 .eel-team-img-box .eel-image-content::before {
279 content: "";
280 position: absolute;
281 top: 0;
282 left: 0;
283 width: 100%;
284 height: 100%;
285 background: rgba(0, 0, 0, 0.6);
286 opacity: 0;
287 transition: opacity 0.4s ease;
288 }
289 .eel-team-grid.skin3 .eel-team-img-box:hover .eel-image-content .eel-description {
290 opacity: 1;
291 }
292 .eel-team-grid.skin3 .eel-team-deg-content .eel-name-deg-wrap {
293 display: flex;
294 justify-content: space-between;
295 align-items: center;
296 width: 100%;
297 }
298 .eel-team-grid {
299 /* Skin 04 - Hover Overlay (structural/positioning only — overridable styles are outside) */
300 }
301 .eel-team-grid.skin4 .grid-item .ee--team-img {
302 position: relative;
303 overflow: hidden;
304 }
305 .eel-team-grid.skin4 .grid-item .ee--team-img .eel-team-hover-content {
306 position: absolute;
307 left: 0;
308 right: 0;
309 bottom: 0;
310 z-index: 3;
311 opacity: 0;
312 pointer-events: none;
313 }
314 .eel-team-grid.skin4 .grid-item .ee--team-img:hover .eel-team-hover-content {
315 opacity: 1;
316 pointer-events: auto;
317 }
318
319 /* skin4 overridable defaults — 4-class specificity so Elementor inline controls (skin4_overlay_*) win */
320 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content {
321 background: rgba(17, 17, 17, 0.75);
322 backdrop-filter: blur(10px);
323 -webkit-backdrop-filter: blur(10px);
324 transition: opacity 0.4s ease;
325 color: #fff;
326 }
327
328 /* skin4 .eel-name-deg-wrap reset — kept at 4-class specificity so Elementor wrap_* controls can win */
329 .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap {
330 background: transparent;
331 }
332
333 .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap .eel-name {
334 margin: 0 0 4px;
335 }
336
337 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 {
338 top: 50%;
339 left: 50%;
340 right: auto;
341 bottom: auto;
342 width: clamp(170px, 62%, 230px);
343 aspect-ratio: 1;
344 display: flex;
345 flex-direction: column;
346 align-items: center;
347 justify-content: center;
348 padding: 24px;
349 border-radius: 50%;
350 background: rgba(255, 255, 255, 0.9);
351 color: #111827;
352 text-align: center;
353 transform: translate(-50%, -50%) scale(0.96);
354 transition: opacity 0.4s ease, transform 0.4s ease;
355 }
356
357 .eel-team-grid.skin4 .grid-item .ee--team-img:hover .eel-team-hover-content.overlay2 {
358 transform: translate(-50%, -50%) scale(1);
359 }
360
361 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name-deg-wrap {
362 padding: 0;
363 border-radius: 0;
364 text-align: center;
365 }
366
367 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name {
368 color: #111827;
369 font-size: 15px;
370 font-weight: 700;
371 line-height: 1.2;
372 }
373
374 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-designation {
375 color: #6b7280;
376 font-size: 12px;
377 line-height: 1.3;
378 }
379
380 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social {
381 position: relative;
382 top: auto;
383 right: auto;
384 bottom: auto;
385 left: auto;
386 padding-top: 12px;
387 }
388
389 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul {
390 position: static;
391 opacity: 1;
392 transform: none;
393 flex-direction: row;
394 justify-content: center;
395 gap: 8px;
396 }
397
398 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li a:not(.eel-popup-trigger) {
399 width: 22px;
400 height: 22px;
401 font-size: 10px;
402 background: #ffffff;
403 color: #111827;
404 box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
405 }
406
407 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li:first-child a:not(.eel-popup-trigger) {
408 background: #465cff;
409 color: #ffffff;
410 }
411
412 /* skin4 .eel-name-deg-wrap reset — kept at 4-class specificity so Elementor wrap_* controls can win */
413 .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap {
414 background: transparent;
415 }
416
417 .eel-team-grid.skin4 .ee--team-img .eel-name-deg-wrap .eel-name {
418 margin: 0 0 4px;
419 }
420
421 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 {
422 top: 50%;
423 left: 50%;
424 right: auto;
425 bottom: auto;
426 width: clamp(170px, 62%, 230px);
427 aspect-ratio: 1;
428 display: flex;
429 flex-direction: column;
430 align-items: center;
431 justify-content: center;
432 padding: 24px;
433 border-radius: 50%;
434 background: rgba(255, 255, 255, 0.9);
435 color: #111827;
436 text-align: center;
437 transform: translate(-50%, -50%) scale(0.96);
438 transition: opacity 0.4s ease, transform 0.4s ease;
439 }
440
441 .eel-team-grid.skin4 .grid-item .ee--team-img:hover .eel-team-hover-content.overlay2 {
442 transform: translate(-50%, -50%) scale(1);
443 }
444
445 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name-deg-wrap {
446 padding: 0;
447 border-radius: 0;
448 text-align: center;
449 }
450
451 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-name {
452 color: #111827;
453 font-size: 15px;
454 font-weight: 700;
455 line-height: 1.2;
456 }
457
458 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-designation {
459 color: #6b7280;
460 font-size: 12px;
461 line-height: 1.3;
462 }
463
464 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social {
465 position: relative;
466 top: auto;
467 right: auto;
468 bottom: auto;
469 left: auto;
470 padding-top: 12px;
471 }
472
473 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul {
474 position: static;
475 opacity: 1;
476 transform: none;
477 flex-direction: row;
478 justify-content: center;
479 gap: 8px;
480 }
481
482 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li a:not(.eel-popup-trigger) {
483 width: 22px;
484 height: 22px;
485 font-size: 10px;
486 background: #ffffff;
487 color: #111827;
488 box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
489 }
490
491 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li:first-child a:not(.eel-popup-trigger) {
492 background: #465cff;
493 color: #ffffff;
494 }
495
496 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social {
497 position: relative;
498 top: auto;
499 right: auto;
500 bottom: auto;
501 left: auto;
502 padding-top: 12px;
503 }
504
505 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul {
506 position: static;
507 opacity: 1;
508 transform: none;
509 flex-direction: row;
510 justify-content: center;
511 gap: 8px;
512 }
513
514 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li a:not(.eel-popup-trigger) {
515 width: 22px;
516 height: 22px;
517 font-size: 10px;
518 background: #ffffff;
519 color: #111827;
520 box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
521 }
522
523 .eel-team-grid.skin4 .ee--team-img .eel-team-hover-content.overlay2 .eel-team-grid-social ul li:first-child a:not(.eel-popup-trigger) {
524 background: #465cff;
525 color: #ffffff;
526 }
527
528 /* Skin 05 - Slide-up info panel with hover contact reveal */
529 .eel-team-grid .ee--team-img.skin5 {
530 position: relative;
531 overflow: hidden;
532 }
533
534 .eel-team-grid .ee--team-img.skin5 .eel-team-img-area,
535 .eel-team-grid .ee--team-img.skin5 .eel-team-img-box {
536 overflow: hidden;
537 }
538
539 .eel-team-grid .ee--team-img.skin5 .eel-team-img-area .eel-team-img {
540 transition: transform 1.3s ease;
541 }
542
543 .eel-team-grid .ee--team-img.skin5 .eel-name-deg-wrap {
544 position: absolute;
545 left: 0;
546 right: 0;
547 bottom: 0;
548 background: #fff;
549 text-align: center;
550 border-radius: 0;
551 z-index: 2;
552 }
553
554 .eel-team-grid .ee--team-img.skin5 .eel-designation {
555 color: #6E777D;
556 }
557
558 .eel-team-grid .ee--team-img.skin5 .eel-author-contact {
559 margin-top: 0;
560 max-height: 0;
561 opacity: 0;
562 overflow: hidden;
563 transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease;
564 }
565
566 .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-inner {
567 display: flex;
568 flex-direction: column;
569 gap: 14px;
570 transform: translateY(12px);
571 transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
572 }
573
574 .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item {
575 display: flex;
576 align-items: center;
577 gap: 12px;
578 background: #F2F3F5;
579 color: #6E777D;
580 font-weight: 500;
581 border-radius: 100px;
582 min-width: 215px;
583 max-width: -moz-max-content;
584 max-width: max-content;
585 padding-right: 28px;
586 transition: all 0.3s ease;
587 }
588
589 .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item:hover {
590 color: #2563eb;
591 }
592
593 .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item .eel-contact-icon {
594 flex-shrink: 0;
595 height: 50px;
596 width: 50px;
597 border-radius: 100px;
598 background: #2563eb;
599 color: #fff;
600 display: flex;
601 align-items: center;
602 justify-content: center;
603 }
604
605 .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item .eel-contact-icon i,
606 .eel-team-grid .ee--team-img.skin5 .eel-author-contact .eel-contact-item .eel-contact-icon svg {
607 height: 1em;
608 fill: currentColor;
609 font-size: 16px;
610 }
611
612 .eel-team-grid .ee--team-img.skin5:hover .eel-team-img-area .eel-team-img {
613 transform: scale(1.15);
614 }
615
616 .eel-team-grid .ee--team-img.skin5 .eel-author-contact {
617 display: grid;
618 justify-content: center;
619 }
620
621 .eel-team-grid .ee--team-img.skin5:hover .eel-author-contact {
622 max-height: 200px;
623 margin-top: 20px;
624 opacity: 1;
625 }
626
627 .eel-team-grid .ee--team-img.skin5:hover .eel-author-contact .eel-contact-inner {
628 transform: translateY(0);
629 }
630
631 .eel-team-grid .ee--team-img.skin5 .eel-image-content:not(.has-description) .eel-description {
632 display: none;
633 }