// TEAM STYLE V1 START .ImgShadow{ filter: drop-shadow(-1px 6px 5px rgba(0, 0, 0, 0.2)); // .ImgRound{ // img{ // b // } // } } .team-item { background: #fff; padding: 30px; border-radius: 5px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); transition: all .3s; max-width: 300px; margin: 0 auto; @include mq (991) { padding: 15px; } .team-image { img { width: auto; height: auto; display: block; margin: 0 auto; border-radius: 50%; } } .team-info { padding-top: 30px; h4 a{ font-family: $roboto; font-size: 24px; color: $primary-clr; display: block; font-weight: 600; transition: all .3s; &:hover { color: $darkmid-clr; } } @include mq (991) { h4{ font-size:18px } } p { transition: all .3s; margin-bottom: 10px; } .social-link { a { font-size: 14px; color: #6c6c6f; margin: 0px 8px; transition: all .3s; &:hover { color: $darkmid-clr; } } } } @include mq (991) { margin-bottom: 30px; } &:hover { background: $primary-clr; p, h4 a { color: #fff; } .social-link a { color: #fff; } } } // TEAM STYLE V1 END // TEAM STYLE V2 START .team-item-v2 { position: relative; overflow: hidden; z-index: 1; &::before { content: ""; position: absolute; top: 0; left: 0; background-color: $primary-clr; height: 40%; width: 100%; z-index: -1; } &::after { content: ""; position: absolute; bottom: -60%; left: 0; opacity: 0; visibility: hidden; background-color: $darkmid-clr; height: 60%; width: 100%; z-index: -1; transition: all 300ms; } .team-info { h4 a { &:hover { color: $primary-clr; } } .social-link { a { &:hover { color: $primary-clr; } } } } &:hover::after { height: 60%; bottom: 0%; opacity: 1; visibility: visible; } }