OwlCyberSecurity - MANAGER

Edit File: images-layout.css

.lakit-images-layout {
  position: relative
}
.lakit-images-layout .grid-items {
  margin-left: 0;
  margin-right: 0
}
.lakit-images-layout__item {
  overflow: hidden;
  position: relative;
  transform: translateZ(0)
}
.lakit-images-layout .lakit-images-layout__item {
  padding: 0
}
.lakit-images-layout__item:hover .lakit-images-layout__content, .lakit-images-layout__item:hover .lakit-images-layout__image {
  opacity: 1
}
.lakit-images-layout__inner {
  position: relative;
  overflow: hidden;
  height: 100%
}
.lakit-images-layout__inner:hover .lakit-images-layout__image {
  transform: scale(1.05)
}
.lakit-images-layout__link {
  display: block;
  height: 100%
}
.lakit-images-layout__icon {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row nowrap;
  pointer-events: none
}
.lakit-images-layout__icon .lakit-images-layout-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center
}
.lakit-images-layout-icon-inner svg {
  width: 1em;
  height: 1em;
  display: block;
  color: inherit
}
.lakit-images-layout__image {
  position: relative;
  line-height: 0;
  height: 100%;
  transition: .5s cubic-bezier(.21, .75, .27, .96)
}
.lakit-images-layout__content, .lakit-images-layout__image:after {
  transition: opacity .5s cubic-bezier(.21, .75, .27, .96);
  opacity: 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%
}
.lakit-images-layout__image:after {
  content: "";
  pointer-events: none
}
.lakit-images-layout__image-instance {
  width: 100%;
  min-width: 50px;
  min-height: 50px;
  transition: .3s
}
.lakit-images-layout.layout-type-list .lakit-images-layout__item, .lakit-images-layout__desc, .lakit-images-layout__title {
  width: 100%
}
.lakit-images-layout__content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  text-align: center;
  z-index: 1
}
.lakit-images-layout__content:empty {
  display: none
}
.lakit-masonry-wrapper .lakit-images-layout__item {
  opacity: 0
}
.imagelayout-preset-type-2 .lakit-images-layout__inner:hover .lakit-images-layout__content,
.lakit-masonry-wrapper .lakit-images-layout__item[data-element-loaded],
.lakit-masonry-wrapper .lakit-images-layout__item.item-loaded {
  opacity: 1
}
.lakit-images-layout.layout-type-grid .lakit-images-layout__image-instance {
  width: 100%;
  object-fit: cover;
  height: 100%
}
.enable-c-height-true .lakit-images-layout__image img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  height: 100%
}
.imagelayout-preset-type-1 .lakit-images-layout__content {
  opacity: 1;
  transition: none
}
.imagelayout-preset-type-1 .lakit-images-layout__content:before {
  transition: .3s
}
.imagelayout-preset-type-1 .lakit-images-layout__title {
  transform: translateY(100%);
  transition: .3s
}
.imagelayout-preset-type-1 .lakit-images-layout__desc {
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(70%)
}
.imagelayout-preset-type-1 .lakit-images-layout__desc a {
  margin: 5px;
  display: inline-block
}
.imagelayout-preset-type-1 .lakit-images-layout__desc a.btn-view-all {
  border: 1px solid;
  padding: .4em 1.5em;
  font-size: .8em;
  margin: 1em 0 0
}
.imagelayout-preset-type-1 .lakit-images-layout__desc a.btn-view-all:hover {
  background-color: var(--theme-secondary-color);
  border-color: var(--theme-secondary-color);
  color: #fff
}
.imagelayout-preset-type-1 .lakit-images-layout__inner:hover .lakit-images-layout__title {
  transform: translateY(0)
}
.imagelayout-preset-type-1 .lakit-images-layout__inner:hover .lakit-images-layout__desc {
  transform: translateY(0);
  visibility: inherit;
  opacity: 1
}
.imagelayout-preset-type-2 .lakit-images-layout__content {
  opacity: .5
}
.imagelayout-preset-type-3 .lakit-images-layout__content {
  top: auto;
  height: auto;
  bottom: 0
}
.elementor-lakit-portfolio-gallery .lakit-masonry-wrapper .col-row, .lakit-masonry-wrapper .lakit-images-layout__list {
  margin: 0 !important
}
.swiper-container.swiper-grid .lakit-images-layout__item {
  flex: auto
}