CODEWITHSUNDEEP
htmlcssvue.js
af costa
af costa

Reputation: 296

Apply a fixed px unit for each image

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>

enter image description here

i want something like this:

enter image description here

Thank you guys.

Upvotes: 1

Views: 39

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

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.sstatic.net/XG0gL.png" alt="">
    <img  src="https://i.sstatic.net/XG0gL.png" alt="">
    <img  src="https://i.sstatic.net/XG0gL.png" alt="">
    <img  src="https://i.sstatic.net/XG0gL.png" alt="">
    
  </div>

Upvotes: 1

Related Questions