.tportfolio { position: relative; overflow: hidden; &:hover{ & .tportfolio__text{ bottom: 0; opacity: 1; visibility: visible; &-2{ bottom: 0; } } } } .tportfolio__img { position: relative; } .tportfolio__img img { max-width: 100%; -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); -moz-filter: grayscale(100%); border-radius: 8px; } .tportfolio:hover .tportfolio__img img{ -webkit-filter: grayscale(0); -ms-filter: grayscale(0); -moz-filter: grayscale(0); } .tportfolio-title { font-weight: 400; @include mq(lg){ padding-right: 35px; } } .tportfolio-title a:hover{ color: $theme; } .tportfolio__text h4 { font-weight: 400; color: #777; margin: 0; font-size: 18px; } .portfolio-filter button { position: relative; display: inline-block; vertical-align: top; font-size: 24px; line-height: 40px; padding: 0px 0px; cursor: pointer; color: #686A6F; font-weight: 300; margin: 0 10px; text-transform: uppercase; letter-spacing: 1px; background: none; transition: .3s; font-family: "Teko", sans-serif; } .portfolio-filter button.active { color: $theme; } // 2 .tportfolio__text { position: absolute; bottom: -50px; left: 0; padding: 30px; z-index: 22; right: 0; background: #fff; margin: 30px; visibility: hidden; opacity: 0; @include transition(.3s); } .portfolio-plus { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); @include mq(lg){ right: 15px; } @include mq(xs){ display: none; } } .portfolio-plus a { height: 50px; width: 50px; line-height: 48px; text-align: center; border-radius: 50%; border: 2px solid #eee; font-size: 15px; color: #111; display: inline-block; } .portfolio-plus a:hover{ background: $theme; border-color: $theme; color: #fff; } .text-end .portfolio-filter button:last-child{ margin-right: 0; } /* portfolio details */ .project-big-thumb { margin-bottom: 58px; & img{ width: 100%; -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); -moz-filter: grayscale(100%); } } .p-details-content { padding-right: 10px; @include mq(xs){ padding-right: 0px; } & h3 { font-size: 36px; line-height: 30px; font-weight: 400; text-transform: uppercase; margin-bottom: 25px; @include mq(xs){ font-size: 28px; } } & p{ margin-bottom: 35px; &:last-child{ margin-bottom: 0; } } } .sidebar-right{ background: $grey; padding: 45px 50px; & .sidebar-single{ margin-bottom: 35px; &:last-child{ margin-bottom: 0; } & label{ font-size: 14px; color: #242629; display: block; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; } & span{ font-size: 18px; line-height: 30px; } } } .portfolio__pagination { & .link-btn-2{ text-transform: uppercase; color: $heading-color; font-weight: 600; & i{ width: 65px; height: 65px; background: $grey; border-radius: 50%; line-height: 65px; text-align: center; font-size: 20px; color: #242629; margin-right: 10px; @include transition(0.3s); &:last-child{ margin-left: 10px; } &:hover{ background-color: $theme; color: $white; } } } } .pagination-border{ border-top: 1px solid $border; border-bottom: 1px solid $border; } .swiper-slide-active .kproject-text { opacity: 0; visibility:hidden; }