/home/edulekha/sriramaaresorts.com/wp-content/themes/getleads/assets/scss/widgets/_gallery.scss
.ekit-wid-con{
.ekit_gallery_grid {
display: flex;
flex-wrap: wrap;
}
.elementskit-single-portfolio-item {
position: relative;
overflow: hidden;
.ekit-gallery-image-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba($color: $color-black, $alpha: 0);
@include transition;
z-index: 1;
}
.elementskit-portfolio-thumb {
display: block;
position: relative;
overflow: hidden;
@include transition;
> img {
display: block;
@include transition;
}
}
.elementskit-hover-area {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: 2;
@include transition;
opacity: 0;
}
.elementskit-hover-content {
z-index: 2;
top: 48%;
left: 0;
transform: translateY(-50%);
width: 100%;
position: absolute;
@include transition;
backface-visibility: hidden;
&.ekit_vertical_alignment_top {
top: 0;
transform: none;
}
&.ekit_vertical_alignment_bottom {
top: initial;
bottom: -5%;
transform: none;
}
}
.elementskit-gallery-title,
.elementskit-gallery-icon,
.elementskit-gallery-description,
.elementskit-gallery-label {
color: $color-white;
}
.elementskit-gallery-label {
display: inline-block;
}
.elementskit-gallery-title {
font-size: rem(18px);
margin-bottom: 15px;
}
.elementskit-gallery-icon {
font-size: rem(18px);
display: inline-block;
text-align: center;
svg {
max-width: 100%;
height: auto;
// padding: 18px;
vertical-align: middle;
}
}
.elementskit-gallery-description,
.elementskit-gallery-label {
font-size: rem(15px);
}
&:hover {
.elementskit-hover-area {
opacity: 1;
}
.elementskit-hover-content {
top: 50%;
&.ekit_vertical_alignment_top {
top: 5%;
}
&.ekit_vertical_alignment_bottom {
top: initial;
bottom: 0;
}
}
.ekit-gallery-image-overlay {
background-color: rgba($color: $color-black, $alpha: .5);
}
}
}
.ekit_gallery_grid_style {
display: flex;
flex-wrap: wrap;
// height: auto !important;
max-height: none;
}
.gallery_grid_style {
&.ekit_gallery_grid_item {
.elementskit-single-portfolio-item {
height: 100%;
}
.elementskit-portfolio-thumb {
height: 100%;
padding-bottom: 85%;
}
.elementskit-grid__img {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
}
}
@media (max-width: 991px) {
.gallery_grid_style.ekit_gallery_grid_item .elementskit-grid__img {
position: static;
}
.gallery_grid_style.ekit_gallery_grid_item .elementskit-portfolio-thumb {
padding-bottom: 0px !important;
}
}
.ekit-gallery-portfolio-tilt {
transform-style: preserve-3d;
transform: perspective(300px);
.elementskit-hover-area {
transform: translateZ(50px);
}
&:hover {
z-index: 1;
}
}
.elementskit-main-filter {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 10;
>li {
margin-right: 10px;
@media (max-width: 1024px) {
margin-bottom: 20px;
}
&:last-child {
margin-right: 0px;
}
>a {
color: #374a5e;
background-color: $color-white;
padding: 8px 34px;
display: block;
@include transition;
position: relative;
&.selected {
background-color: #374a5e;
color: $color-white;
}
}
}
}
.elemetskit_filter_wraper_outer {
&.elemetskit_filter_center {
text-align: center;
.filter-button-wraper {
display: inline-flex;
}
}
&.elemetskit_filter_left {
text-align: left;
.filter-button-wraper {
display: inline-flex;
}
}
&.elemetskit_filter_right {
text-align: right;
.filter-button-wraper {
display: inline-flex;
}
}
}
.elementskit_filter_style_three {
>li {
>a {
border: 2px solid transparent;
&.selected {
box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.07);
border-color: currentColor;
color: #374a5e;
background-color: $color-white;
}
}
}
&.elementskit_nav_caret {
>li {
>a {
&::before {
position: absolute;
content: "";
top: 0px;
left: 50%;
transform: translateX(-50%);
height: 15px;
width: 2px;
opacity: 0;
transition: 200ms top ease, opacity 300ms ease-in;
background-color: rgb(55, 74, 94);
z-index: -1;
}
&.selected {
&::before {
top: 100%;
opacity: 1;
}
}
}
}
}
}
.elementskit_filter_style_four {
box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.07);
border: 2px solid rgb(234, 83, 86);
background-color: rgb(255, 255, 255);
>li {
>a {
&.selected {
background-color: $color-white;
color: #ea5356;
}
}
}
&.elementskit_divider_active {
>li {
>a {
&::before {
position: absolute;
content: "";
top: 50%;
transform: translateY(-50%);
right: 0;
background-color: rgb(234, 83, 86);
width: 2px;
height: 19px;
}
}
&:last-child {
>a {
&::before {
display: none;
}
}
}
}
}
&.elementskit_nav_caret {
>li {
>a {
&::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) rotate(45deg);
@include equal-size(15px);
background: rgb(234, 83, 86);
background: linear-gradient(-45deg, #ea5356 0%, #ea5356 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
transition: 200ms bottom ease, opacity 300ms ease-in;
}
&.selected {
&::after {
bottom: -7.5px;
opacity: 1;
}
}
}
}
}
}
.elementskit_filter_style_five {
border: 2px solid #374a5e;
border-radius: 21.5px;
box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.07);
background-color: $color-white;
overflow: hidden;
>li {
margin-right: 0px;
}
&.elementskit_divider_active {
>li {
>a {
&::before {
position: absolute;
content: "";
top: 50%;
transform: translateY(-50%);
right: 0;
background-color: #374a5e;
width: 2px;
height: 19px;
}
}
&:last-child {
>a {
&::before {
display: none;
}
}
}
}
}
}
.elementskit_filter_style_six {
>li {
>a {
background-color: transparent;
>.elementskit_filter_nav_text {
position: relative;
&::before {
position: absolute;
content: "";
left: 0;
bottom: -5px;
width: 100%;
height: 2px;
@include transition;
background-color: rgb(234, 83, 86);
transform: scaleX(0);
transform-origin: left;
z-index: -1;
}
}
&.selected {
background-color: transparent;
color: rgb(234, 83, 86);
>.elementskit_filter_nav_text {
&::before {
transform: scaleX(1);
}
}
}
}
}
}
}