Apply a fixed px unit for each image - html

Question

I have an image that is a card i need to repeat it 30 times, and on each time i want to apply for a specific card a left position so it overlaps the card before staying on a position like a deck.
The thing is, when i apply a left position to the image card, it applies the same left position to all cards, so there is no overlap position.
So i have something like this:
<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>
i want something like this:
Thank you guys.

Answer 1

You can do it with only css margin-left except the first image :not(:first-child)
So remove it :style="{'left': -index * 30}"
.triPack {
display: flex; }
img {
width: 80px;
height: 100px;
position: relative;
}
img:not(:first-child) {
margin-left: -45px;
}
<div class="triPack">
<img src="https://i.stack.imgur.com/XG0gL.png" alt="">
<img src="https://i.stack.imgur.com/XG0gL.png" alt="">
<img src="https://i.stack.imgur.com/XG0gL.png" alt="">
<img src="https://i.stack.imgur.com/XG0gL.png" alt="">
</div>