I am working on a project where I have an image of a card that needs to be repeated 30 times. Each time the card is repeated, I want it to overlap with the previous card in a specific position, resembling a deck of cards.
The issue I am facing is that when I apply a left position to the image card, it applies the same position to all cards, resulting in no overlapping positions.
This is what my current code looks like:
<template>
<div class="triPack">
<img :style="{'left': -index * 30}" v-for="index in 30" :key="index" src="../../assets/images/cardThemes/blue.png" alt="">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
.triPack {
display: flex;
img {
width: 80px;
height: 100px;
position: relative;
}
}
</style>
https://i.sstatic.net/jAdLk.png
What I want to achieve:
https://i.sstatic.net/7oFkZ.png
Thank you for your help!