1
<v-hover
2
          v-slot="{ hover }"
3
          v-for="card in cards"
4
          :key="card.id"
5
          class="work-cards"
6
          :style="$vuetify.breakpoint.xs ? 'place-items: center;' : ''"
7
        >
8
          <v-card
9
            data-aos="fade-up"
10
            class="d-flex content-card elevation-0 mb-2"
11
            @click="openWork(card)"
12
          >
13
            <div
14
              :class="['img-container rounded-lg', { 'zoom-img': hover }]"
15
              :style="{
16
                backgroundImage: `url(${card.img})`,
17
              }"
18
            >
19
              <div
20
                :class="['container-info', { 'opacity-info': !hover }]"
21
                style="min-height: 250px"
22
              >
23
                <div class="d-flex mb-1">
24
                  <p
25
                    class="card-year font-weight-black grey--text text--lighten-3 mb-0 mx-2"
26
                  >
27
                    {{ card.year }}
28
                  </p>
29
                  <p class="card-title font-weight-black white--text mb-0">
30
                    {{ card.shortTitle }}
31
                  </p>
32
                </div>
33

34
                <div class="d-flex">
35
                  <v-chip
36
                    small
37
                    v-for="chip in card.tech"
38
                    :key="chip.id"
39
                    :text-color="chip.color"
40
                    class="ml-2"
41
                    :color="chip.background"
42
                    >{{ chip.name }}</v-chip
43
                  >
44
                </div>
45
              </div>
46
            </div>
47
          </v-card>
48
        </v-hover>