Sid Gifari File Manager
🏠 Root
/
home
/
ailwtbdh
/
public_html
/
wp-content
/
plugins
/
element-ready-lite
/
assets
/
css
/
widgets
/
Editing: team copy.css
/* ---------------------- TEAM WIDGETS ------------------------- */ .single__team { position: relative; text-align: center; } .single__team:before, .single__team:after { content: ""; position: absolute; z-index: -1; } .member__thumb { text-align: center; display: inline-block; margin-bottom: 30px; } .member__thumb img { margin: auto; } .member__name { font-size: 24px; line-height: 1; margin-bottom: 10px; } .member__designation { text-transform:capitalize; margin-bottom: 0; } .member__content, .member__description { margin-top: 30px; } .member__socials { margin-top: 30px; } .member__socials a { display: inline-block; text-align: center; margin: 0 10px; } /* ---------------------- VARIANT ----------------------- */ .team__style__1 .member__thumb { border-radius: 50%; overflow: hidden; } .team__style__1 .member__socials a:hover { color: #ffbc48; } /* ---------------------- ------------------------ */ .team__style__3 .single__team { overflow: hidden; } .team__style__3 .member__thumb { width: 100%; } .team__style__3 .member__thumb img { width: 100%; padding: 0; display: block; } .team__style__3 .member__content__wrap { position: relative; } .team__style__3 .member__socials { position: absolute; top: -140px; left: -90%; width: calc(100% - 50px); background: #ffffff; padding: 20px; margin: 0; transition: 0.5s; visibility: hidden; opacity: 0; -webkit-clip-path: polygon(100% 0, 100% 70%, 90% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% 70%, 90% 100%, 0 100%, 0 0); } .team__style__3 .single__team:hover .member__socials { left: 0; opacity: 1; visibility: visible; } /*-----------2-----------*/ .team__style__4 .owl-item { padding-top: 30px; } .team__style__4 .single__team { background: #F5F9FF; width: calc(100% - 30px); float: right; text-align: inherit; } .team__style__4 .member__thumb { width: 100%; position: relative; margin-left: -30px; margin-top: -30px; margin-bottom: 0; } .team__style__4 .member__content__wrap { padding: 30px; } .team__style__4 .member__designation { font-weight: 700; color: #01BAA3; } .team__style__4 .member__socials a { width: 40px; height: 40px; background: #ffffff; padding-top: 6px; color: #AFCAD7; box-shadow: 0 0 5px rgba(0,0,0,0.06); margin: 0; margin-right: 10px; } .team__style__4 .member__socials a:hover { background: #00BAA3; color: #ffffff; } /* ------------------------ TEAM STYLE 5 ------------------------- */ .team__style__5 .member__thumb{ position: relative; } .team__style__5 .member__thumb:before { position: absolute; left: -5px; bottom: -5px; width: 100%; height: 90%; content: ""; background: #1657E2; border-radius: 60% 45% 30% 32%; transform: rotate(-5deg); opacity: 0.1; transition: 0.3s; } .team__style__5 .member__thumb img { border-radius: 50%; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.08); background: #ffffff; width: 200px; height: 200px; } .team__style__5 .single__team:hover .member__thumb:before{ opacity: 1; } .team__style__5 .member__content__wrap { position: relative; } .team__style__5 .member__socials { width: 40px; margin: 0; position: absolute; height: 40px; top: -70px; left: 50%; transform: translateX(-50%); overflow: hidden; text-align: center; transition:0.3s; } .team__style__5 .member__socials a { background: #0077B5; color: #ffffff; width: 40px; height: 40px; padding-top: 6px; border-radius: 50%; margin: 0; transition:0.3s; } .team__style__5 .member__socials a:hover { background: #ffffff; color: #0077B5; box-shadow:0 4px 8px rgba(0,0,0,.1) } /* ------------------------ TEAM STYLE 6 ------------------------- */ .team__style__6 .single__team { margin-bottom: 60px; position: relative; overflow: hidden; } .team__style__6 .member__thumb { padding: 10px; background: #ffffff; margin-bottom: 0; } .team__style__6 .member__thumb img{ width: 100%; } .team__style__6 .member__content__wrap { margin-top: -50px; position: absolute; z-index: 1; background: #ffffff; width: calc( 100% - 30px ); padding: 30px; right: 0; bottom: 0; transition: 0.3s; } .team__style__6 .member__socials { margin-top: 15px; margin-bottom: -55px; transition: 0.3s; } .team__style__6 .single__team:hover .member__socials { margin-bottom: 0; } /*------------------------ TEAM STYLE 7 -------------------------*/ .team__style__7 .owl-carousel .owl-stage-outer { margin-right: -20px !important; } .team__style__7 .single__team { position: relative; margin-bottom: 20px; } .team__style__7 .member__content__wrap { position: absolute; left: 0; bottom: 0; background: #0c5adb; width: 100%; padding: 20px; border-radius: 5px; transition: 0.5s; color: #ffffff; opacity: 0; visibility: hidden; } .team__style__7 .single__team:hover .member__content__wrap { transform: translate(20px, 20px); visibility:visible; opacity:1; } .team__style__7 .member__thumb { margin-bottom: 0; } .team__style__7 .single__team .member__name { color: #ffffff; } .team__style__7 .member__socials { margin-top: 15px; } .team__style__7 .member__socials a { color: #ffffff; } /*------------------------ TEAM STYLE 8 -------------------------*/ .team__style__8 .single__team { background: #ffffff; padding: 40px; border-radius: 10px; overflow: hidden; position: relative; } .team__style__8 .member__thumb { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; } .team__style__8 .team__hover__content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; transition: 0.8s; opacity: 0; visibility: hidden; } .team__style__8 .team__hover__content .member__thumb { width: 100%; height: 100%; border-radius: 0; } .team__style__8 .team__hover__content .member__name { color: #ffffff; } .team__style__8 .team__hover__content .member__name__designation { color: #ffffff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; padding: 30px; background: linear-gradient(rgba(0,0,0,0),#3C3C3C); } .team__style__8 .single__team:hover .team__hover__content { visibility: visible; opacity: 1; } /*------------------------ TEAM STYLE 9 -------------------------*/ .team__style__9 .owl-stage-outer { overflow:visible !important; } .team__style__9 .owl-item { opacity: 0; transition: opacity 500ms; } .team__style__9 .owl-item.active { opacity: 1; } .team__style__9 .single__team { background: #ffffff; padding: 40px; border-radius: 10px; overflow: hidden; position: relative; } .team__style__9 .member__thumb { width: 170px; height: 170px; border-radius: 50%; overflow: hidden; } .team__style__9 .team__hover__content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff; transition: 0.8s; opacity: 0; visibility: hidden; } .team__style__9 .team__hover__content .member__thumb { width: 100%; height: 100%; border-radius: 0; margin-bottom: 0; } .team__style__9 .team__hover__content .member__name__designation { color: #ffffff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; padding: 30px; background: linear-gradient(0,#FF564F,rgb(255 171 74 / .5)); margin-bottom: 0; padding-bottom: 60px; } .team__style__9 .single__team:hover .team__hover__content { visibility: visible; opacity: 1; } .team__style__9 .team__hover__content .member__name { color: #ffffff; font-size: 22px; font-weight: 600; transform: translateY(50px); transition: all 0.4s cubic-bezier(0.76, 0.21, 0.32, 0.85); transition-delay: 0.3s; font-size: 30px; opacity: 0; } .team__style__9 .team__hover__content .member__designation { transform: translateY(50px); transition: all 0.4s cubic-bezier(0.76, 0.21, 0.32, 0.85); transition-delay: 0.2s; transform: translateY(50px); opacity: 0; } .team__style__9 .member__socials { position: absolute; left: 0; bottom: 20px; width: 100%; transform: translateY(50px); transition: all 0.4s cubic-bezier(0.76, 0.21, 0.32, 0.85); transition-delay: 0.1s; opacity: 0; } .team__style__9 .member__socials a { color: #ffffff; } .team__style__9 .single__team:hover .team__hover__content .member__name { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .team__style__9 .single__team:hover .team__hover__content .member__designation { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .team__style__9 .single__team:hover .member__socials { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } /*------------------------ TEAM STYLE 10 -------------------------*/ .team__style__10 .single__team { border-radius: 5px; overflow: hidden; } .single__team:before { background: linear-gradient(rgb(255 171 74 / 50%), #000000); height: 0; width: 100%; left: 0; top: 0; z-index: 1; transition: all 0.3s cubic-bezier(0.46,-0.01, 0.5, 1.01); transition-delay: 0.6s; opacity: 0; visibility: hidden; } .team__style__10 .single__team:hover:before { top: auto; bottom: 0; opacity: 1; visibility: visible; height: 100%; transition-delay: 0s; } .team__style__10 .member__thumb { margin-bottom: 0; width: 100%; display: block; position: relative; z-index: -1; } .team__style__10 .member__content__wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: linear-gradient(rgb(255 171 74 / 50%), #000000); color: #ffffff; transition: all 0.3s cubic-bezier(0.46,-0.01, 0.5, 1.01); transition-delay: 0.6s; opacity: 0; visibility: hidden; z-index: 1; } .team__style__10 .single__team:hover .member__content__wrap { opacity: 1; visibility: visible; height: 100%; transition-delay: 0s; } .team__style__10 .member__name { color: #ffffff; } .team__style__10 .member__name__designation { transform: translateY(50px); transition: all 0.4s cubic-bezier(0.76, 0.21, 0.32, 0.85); transition-delay: 0.3s; opacity: 0; } .team__style__10 .member__socials{ margin-top: 20px; transition: all 0.4s cubic-bezier(0.76, 0.21, 0.32, 0.85); transition-delay: 0.2s; transform: translateY(50px); opacity: 0; } .team__style__10 .member__socials a { color: #ffffff; margin-left: 0; width: 35px; text-align: left; } .team__style__10 .member__socials a:hover{ color: #FFAB4A; } .team__style__10 .single__team:hover .member__name__designation{ opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .team__style__10 .single__team:hover .member__socials { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
Save
Cancel