.team-area{ @media #{$md}{ padding-bottom: 100px; } @media #{$sm}{ padding-bottom: 50px; } @media #{$xs}{ padding-bottom: 50px; } .single-team{ position: relative; .team-img{ overflow: hidden; img{ width: 100%; transform:scale(1); transition: all 0.6s ease-out 0s; } } .team-caption{ background-image: url(../img/gallery/team_bg.png); width: 350px; height: 155px; background-repeat: no-repeat; padding-top: 57px; margin: 0 auto; left: 0; right: 0; z-index: 1; position: absolute; bottom: -71px; @include transition(.4s); background-size: contain; @media #{$lg}{ width: 256px; padding-top: 32px; bottom: -92px; } @media #{$md}{ width: 260px; padding-top: 32px; bottom: -92px; } @media #{$sm}{ width: 220px; padding-top: 25px; bottom: -92px; } @media #{$xs}{ width: 235px; padding-top: 25px; bottom: -92px; } &::before{ position: absolute; background-image: url(../img/gallery/team_bg2.png); content: ""; width: 350px; height: 155px; background-repeat: no-repeat; transform: translateY(-53%); margin: 0 auto; left: 1px; bottom: -84px; z-index: -1; opacity: 0; visibility: hidden; @include transition(.4s); background-size: contain; @media #{$lg}{ width: 256px; } @media #{$md}{ width: 260px; } @media #{$sm}{ width: 220px; } @media #{$xs}{ width: 235px; } } span{ color: #fff; font-size: 14px; font-weight: 300; font-family:$font_1; text-transform: uppercase; display: block; margin-bottom: 10px; } h3{ a{ color: #ffff; font-weight: 600; font-size: 18px; margin-bottom: 10px; display: block; text-transform: uppercase; } } } &:hover{ .team-caption{ &::before{ opacity: 1; visibility: visible; } } } } /* dots Style */ .dot-style{ .slick-dots{ text-align: center; bottom: -72px; position: relative; @media #{$md}{ bottom: -36px; } @media #{$sm}{ bottom: 0px; } @media #{$xs}{ bottom: -10px; } li { display: inline-block; button { text-indent: -999999px; padding: 0px; height: 5px; width: 20px; margin: 0px 4px; border: 0; background: #bfbfbf; transition: .3s; cursor: pointer; } } li.slick-active button { background: #d19f68; width: 35px; } } } } .single-team:hover .team-img img { transform:scale(1.05); }