diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue index 61bb934..e4de38b 100644 --- a/layers/components/blocks/slide/Thumbnail.vue +++ b/layers/components/blocks/slide/Thumbnail.vue @@ -199,6 +199,13 @@ onBeforeUnmount(() => { .thumbnail-slide.is-active::after { @apply border-[var(--pagination-active)]; } +.thumbnail-slide:hover img, +.thumbnail-slide.is-active img { + @apply opacity-100; +} +.thumbnail-slide img { + @apply opacity-50 transition-opacity duration-200 ease-in-out; +} /* 기본 버전 스타일 */ .thumbnail-carousel.thumbnail-default, @@ -216,7 +223,7 @@ onBeforeUnmount(() => { @apply right-0; } .thumbnail-carousel.thumbnail-default .thumbnail-slide { - @apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[30px] + @apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[15px] after:hidden md:after:block; } .thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img, diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue index 36bf047..e1abcb6 100644 --- a/layers/templates/GrGallery01/index.vue +++ b/layers/templates/GrGallery01/index.vue @@ -175,22 +175,11 @@ const onArrowClick = (direction, targetIndex) => { .thumbnail-carousel:deep(.main-splide) { @apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)]; } -.thumbnail-carousel:deep(.thumbnail-slide) { - @apply opacity-50; -} -.thumbnail-carousel:deep(.thumbnail-slide:hover), -.thumbnail-carousel:deep(.thumbnail-slide.is-active) { - @apply opacity-100; -} -.thumbnail-carousel:deep(.thumbnail-splide .splide__track) { - @apply md:max-w-[720px]; -} - .main-slide { @apply relative aspect-[16/9]; } -.slide-image { - @apply transition-opacity duration-500 ease-in-out; +.thumbnail-carousel:deep(.thumbnail-splide .splide__track) { + @apply md:max-w-[720px]; } .btn-play { @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;