modifs ordre slider, logo insta, hover header

This commit is contained in:
Valentin 2024-05-27 16:51:17 +02:00
parent 5355833a86
commit 5bec5e2c65
10 changed files with 25 additions and 18 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

View File

@ -62,6 +62,12 @@ export default {
width: auto; width: auto;
position: relative; position: relative;
margin-top: 1rem; margin-top: 1rem;
> .hover_el_active {
top: -100% !important;
left: -40% !important;
width: 170% !important;
height: 300% !important;
}
> a { > a {
position: relative; position: relative;
padding: 10px; padding: 10px;
@ -69,10 +75,6 @@ export default {
z-index: 1; z-index: 1;
} }
} }
h1 .hover_el_active {
left: -40% !important;
width: 170% !important;
}
h1:hover .hover_el_active, h1:hover .hover_el_active,
h1.active .hover_el_active { h1.active .hover_el_active {
opacity: 1; opacity: 1;
@ -101,10 +103,10 @@ export default {
} }
.hover_el_active { .hover_el_active {
position: absolute; position: absolute;
top: -70%; top: -75%;
left: -15%; left: -25%;
width: 130%; width: 150%;
height: 240%; height: 250%;
background-size: contain !important; background-size: contain !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-position: center !important; background-position: center !important;
@ -113,22 +115,20 @@ export default {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
#indexActive { #indexActive {
background-image: url('/assets/images/hover-index.png'); background-image: url('/assets/images/hover-index-2.png');
} }
#galeryActive { #galeryActive {
background-image: url('/assets/images/hover-index.png'); background-image: url('/assets/images/hover-galery-2.png');
left: -30%;
width: 160%;
} }
#shopActive { #shopActive {
background-image: url('/assets/images/hover-index.png'); background-image: url('/assets/images/hover-shop-2.png');
} }
#contactActive { #contactActive {
background-image: url('/assets/images/hover-index.png'); background-image: url('/assets/images/hover-contact-2.png');
} }
} }
> div { > div {
width: 3rem; width: 2rem;
z-index: 1; z-index: 1;
img { img {
padding-top: 10px; padding-top: 10px;
@ -149,6 +149,10 @@ export default {
flex-direction: row; flex-direction: row;
h1 { h1 {
margin-top: 0; margin-top: 0;
> .hover_el_active {
top: -130% !important;
height: 350% !important;
}
} }
ul { ul {
margin-top: 0; margin-top: 0;
@ -157,9 +161,12 @@ export default {
} }
} }
} }
> div > a > img { > div {
width: 3rem;
> a > img {
padding: 10px; padding: 10px;
} }
} }
} }
}
</style> </style>

View File

@ -25,7 +25,7 @@
@slideChange="onSlideChange" @slideChange="onSlideChange"
@swiper="onSwiper" @swiper="onSwiper"
> >
<swiper-slide v-for="content in contents" :key="content.id"> <swiper-slide v-for="content in contents.slice().reverse()" :key="content.id">
<div class="swiper-zoom-container"> <div class="swiper-zoom-container">
<img <img
:src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`" :src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"