.team-section { &:before { top: 0; width: 100%; content: ''; height: 300px; position: absolute; background-image: url(../img/team/tbg1.png); } &:after { bottom: 0; width: 100%; content: ''; height: 20%; position: absolute; background-image: url(../img/team/tbg2.png); } .section-left-title .title-head { bottom: -60px; position: absolute; } padding-bottom: 120px; } .member-img { height: 420px; overflow: hidden; margin-bottom: 20px; position: relative; transition: .3s all ease-in-out; &:after { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; content: ''; height: 100%; transform: translate3d(0,50%,0); transition: opacity 0.35s, transform 0.35s; background: linear-gradient(to bottom, rgba(21, 37, 65, 0) 0%, rgba(21, 37, 65, 0.8) 75%); } } .member-details { background-color: #f7f7f7; padding: 35px 0px; .member-name { font-size: 30px; margin-bottom: 10px; } .member-designation { font-weight: 700; color: $primary-color; } } .member-social { position: absolute; bottom: -62px; width: 100%; li { width: 20%; float: left; text-align: center; background-color: #e7e7e7; a { display: block; color: #888888; font-size: 18px; padding: 20px 0px 15px; &:hover { color: #fff; background-color: $primary-color; } } } } .team-member { &:hover { .member-img { height: 360px; &:after { opacity: 1; transform: translate3d(0,0,0) } } } } //*** Home Page 3 ***// .team-section2 { &:before { top: 0; left: 0; content: ''; width: 100%; height: 625px; position: absolute; background-image: url(../img/team/tmbg.jpg); } .section-title .title-bg:after { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4), black); } .section-title .title-bg { color: #635a5a; } .background-overlay { height: 625px; background-color: rgba(0, 0, 0, 0.8); } .section-title .title-head h2, .section-title .title-head p { color: #fff; } .team_member_content { z-index: 1; margin: 0 15px; position: relative; .team_member2 { .member-details { padding: 35px 25px; box-shadow: 0px 8px 16px 0px rgba(0, 15, 44, 0.06); .member-name { font-size: 26px; } .member-designation { color: $primary-color2; } } .member-img2 { overflow: hidden; .background-overlay { opacity: 0; transition: .3s all ease-in-out; background-color: rgba(0, 0, 0, 0.7); } } .member-social2 { bottom: 20px; width: 100%; margin: 0 auto; position: absolute; li { opacity: 0; color: #fff; float: none; bottom: 140px; margin: 0 14px; position: relative; transition-duration: .6s; transition-timing-function: cubic-bezier(1,-.53,.405,1.425); &:nth-child(1) { transition-delay: .1s; } &:nth-child(2) { transition-delay: .15s; } &:nth-child(3) { transition-delay: .2s; } &:nth-child(4) { transition-delay: .25s; } &:nth-child(5) { transition-delay: .30s; } &:hover { color: $primary-color2; } } } &:hover { li { opacity: 1; z-index: 1; bottom: 40px; } .member-img2 { .background-overlay { opacity: 1; } } } } } } .team_people { padding: 120px 0px; .team-member { overflow: hidden; max-height: 580px; margin-bottom: 30px; } .member-social { bottom: inherit; position: inherit; } } @-webkit-keyframes Rx-width-75 { 0% { width: 0%; } 100% { width: 75%; } } @keyframes Rx-width-75 { 0% { width: 0%; } 100% { width: 75%; } } @-webkit-keyframes Rx-width-71 { 0% { width: 0%; } 100% { width: 71%; } } @keyframes Rx-width-71 { 0% { width: 0%; } 100% { width: 71%; } } @-webkit-keyframes Rx-width-80 { 0% { width: 0%; } 100% { width: 80%; } } @keyframes Rx-width-80 { 0% { width: 0%; } 100% { width: 80%; } } @keyframes Rx-width-90 { 0% { width: 0%; } 100% { width: 90%; } } @-webkit-keyframes Rx-width-90 { 0% { width: 0%; } 100% { width: 90%; } } .Rx-width-75 { -webkit-animation-name: Rx-width-75; -o-animation-name: Rx-width-75; animation-name: Rx-width-75; animation-fill-mode: forwards; } .Rx-width-80 { -webkit-animation-name: Rx-width-80; -o-animation-name: Rx-width-80; animation-name: Rx-width-80; animation-fill-mode: forwards; } .Rx-width-71 { -webkit-animation-name: Rx-width-71; -o-animation-name: Rx-width-71; animation-name: Rx-width-71; animation-fill-mode: forwards; } .Rx-width-90 { -webkit-animation-name: Rx-width-90; -o-animation-name: Rx-width-90; animation-name: Rx-width-90; animation-fill-mode: forwards; } .team_skill_img { box-shadow: 0px 30px 60px 0px rgba(104, 0, 5, 0.2); } .team_skill_bar { padding-top: 30px; margin-left: 30px; } .team_skill_section { .background-overlay { background-color: rgba(243, 82, 90, .9); } .banner_parallax { padding: 120px 0px; background-image: url(../img/team/tsbg.jpg); } .title-head { h2,p { color: #fff; } p:before { background-color: #fff; } } .section-title-area { padding-bottom: 45px; } } .skill_progress { .single_experties { margin-bottom: 30px; } .progress_text { width: 100%; margin-bottom: 10px; display: inline-block; } .skill-title, .skill-percent { color: #fff; font-weight: 700; } .progress { width: 100%; height: 7px; border-radius: 0; background-color: #fc888d; .progress-bar { background-color: #fff; } } }