관리-도구
편집 파일: _gallery.scss
@use '../../utils' as *; /*----------------------------------------*/ /* 7.9 gallery css start /*----------------------------------------*/ .tp-gallery { &-item { &:hover { & .tp-gallery-thumb { & img { transform: scale(1.2); } } } } &-thumb { overflow: hidden; position: relative; & img { width: 100%; transition: 1.3s all ease; } &::after{ background: rgba(255, 255, 255, 0.3); content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 1; pointer-events: none; } &:hover { &::after{ height: 100%; opacity: 0; -webkit-transition: all 400ms linear; transition: all 400ms linear; } } } &-title { color: var(--tp-common-white); font-size: 20px; font-weight: 600; @media #{$xs}{ margin-bottom: 20px; } & a { background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; transition: background-size 0.6s linear; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); &:hover { background-size: 0% 1px, 100% 1px; } } } &-content { position: absolute; bottom: -11%; left: 40px; right: 40px; padding: 45px 50px; padding-top: 40px; transform: perspective(400px) rotateX(-90deg); transform-origin: center; transition: all 0.5s ease-in-out; @media #{$xl,$lg,$md,$xs}{ padding: 40px 20px; left: 20px; right: 20px; } & p { color: var(--tp-common-white); font-size: 16px; font-weight: 400; margin-bottom: 20px; @media #{$xl,$lg,$md,$xs}{ font-size: 12px; } } } &-active { margin: -150px 0; padding: 150px 0; & .swiper-slide { &.swiper-slide-active { & .tp-gallery-content { transform: perspective(400px) rotateX(0deg); } } } } }