174 lines
3.9 KiB
Vue
174 lines
3.9 KiB
Vue
<script setup>
|
|
import Name from './Name.vue';
|
|
import { useBurgerStore } from '@/stores/burger';
|
|
//import { Ref } from 'vue';
|
|
|
|
const burger = useBurgerStore()
|
|
|
|
const turnMyCard = (event) => {
|
|
let link = event.currentTarget
|
|
link.classList.add('turned')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<div class="images-grid-gallery">
|
|
<a class="image-link" href="#"
|
|
@click="turnMyCard($event)"
|
|
>
|
|
<div class="image-container" data-label="Who am I">
|
|
<img class="image hide"
|
|
src="@/assets/MaPhoto.jpg"
|
|
alt=""
|
|
>
|
|
<img class="image_background"
|
|
src="@/assets/question.png"
|
|
alt="">
|
|
</div>
|
|
</a>
|
|
<a class="image-link" href="#">
|
|
<div class="image-container" data-label="Who am I">
|
|
<img class="image_background" src="@/assets/question.png" alt="">
|
|
</div>
|
|
</a>
|
|
<a class="image-link" href="#">
|
|
<div class="image-container" data-label="Who am I">
|
|
<img class="image_background" src="@/assets/question.png" alt="">
|
|
</div>
|
|
</a>
|
|
<a class="image-link" href="#">
|
|
<div class="image-container" data-label="Who am I">
|
|
<img class="image_background" src="@/assets/question.png" alt="">
|
|
</div>
|
|
</a>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");
|
|
|
|
@import '@/style/colors.scss';
|
|
|
|
.images-grid-gallery {
|
|
//max-width: $maxWidth;
|
|
margin: 0 1em;
|
|
display: grid;
|
|
grid-template-columns: repeat (2, 1fr);
|
|
//grid-auto-columns: minmax(10px, auto);
|
|
gap:1em;
|
|
//border : 3px solid white;
|
|
height:100vh;
|
|
}
|
|
|
|
.image-link {
|
|
display: flex;
|
|
border : 3px solid white;
|
|
background : white;
|
|
border-radius: 10px;
|
|
margin:0 auto;
|
|
margin-bottom: 1em;
|
|
width: $imageWidth;
|
|
overflow: hidden;
|
|
transform: rotateY(0deg);
|
|
transition: 1s;
|
|
&.turned{
|
|
transform: rotateY(180deg);
|
|
}
|
|
& > .image-container {
|
|
border : 3px solid white;
|
|
border-radius: 22px;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
}
|
|
|
|
&:nth-child(1), &:nth-child(2){
|
|
aspect-ratio: 1/1;
|
|
aspect-ratio: 8/11;
|
|
}
|
|
&:nth-child(3), &:nth-child(4){
|
|
aspect-ratio: 8/11;
|
|
}
|
|
|
|
@for $i from 1 to 5 {
|
|
&:nth-child(#{$i}) > .image-container > .image_background{
|
|
transform:scale(1.0);
|
|
transition: 0.5s;
|
|
position:relative;
|
|
bottom:-400px;
|
|
left:-120px;
|
|
animation-duration: 1000ms;
|
|
animation-name: show-gallery;
|
|
animation-timing-function: cubic-bezier(0.2, 0.9, 0.44, 1);
|
|
animation-delay: $i*200 + 1000ms;
|
|
animation-fill-mode: forwards;
|
|
|
|
}
|
|
}
|
|
&:hover .image_background{
|
|
transform: scale(1.1);
|
|
}
|
|
&:hover > .image_background:before {
|
|
opacity: 1;
|
|
left: -5px;
|
|
top: 50px;
|
|
}
|
|
}
|
|
|
|
.hide{
|
|
display : none;
|
|
}
|
|
|
|
@media (min-width: 720px){
|
|
.images-grid-gallery{
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
|
|
@keyframes show-gallery {
|
|
0%{
|
|
|
|
}
|
|
100%{
|
|
bottom: 300px;;
|
|
}
|
|
}
|
|
// @keyframes menu-shake{
|
|
// from {
|
|
// //opacity: 0;
|
|
// filter: drop-shadow(-150px 0px 10px #4d0000);
|
|
// //background-color: rgb(99, 0, 0);
|
|
// }
|
|
// 10%{
|
|
// //opacity: 50%;
|
|
// filter: drop-shadow(150px 0px 3px #4d0000);
|
|
// }
|
|
// 20%{
|
|
// filter: drop-shadow(-100px 0px 3px #4d0000);
|
|
|
|
// }
|
|
// 30%{
|
|
// filter: drop-shadow(50px 0px 3px #4d0000);
|
|
|
|
// }
|
|
// 40%{
|
|
// filter: drop-shadow(-25px 0px 3px #4d0000);
|
|
|
|
// }
|
|
// 50%{
|
|
// filter: drop-shadow(10px 0px 3px #4d0000);
|
|
|
|
// }
|
|
// 80%{
|
|
|
|
// filter: drop-shadow(-10px 0px 3px #4d0000);
|
|
// }
|
|
// 100%{
|
|
// //opacity : 100%;
|
|
// filter: drop-shadow(0px 0px 3px #4d0000);
|
|
|
|
// }
|
|
// }
|
|
</style> |