v-item-group.vue

<template>
  <boilerplate>
    <h1 class="display-1 grey--text font-weight-light">Select your destination</h1>
    <span class="caption font-weight-bold">GORGEOUS SITES AROUND THE WORLD</span>
    <v-divider class="mt-4 mb-5"></v-divider>
    <v-item-group
      class="justify-center"
      active-class="v-card--active"
      v-model="selection"
    >
      <v-hover
        v-for="(feature, i) in features"
        :key="feature.img"
      >
        <v-card
          :class="{
            [`elevation-${hover || selection === String(i) ? 18 : 1}`]: true
          }"
          class="mx-3"
          slot-scope="{ hover }"
        >
          <v-img
            :src="feature.img"
            height="200"
          ></v-img>
        </v-card>
      </v-hover>
    </v-item-group>
  </boilerplate>
</template>

<script>
  export default {
    data: () => ({
      features: [
        {
          img: 'https://images.pexels.com/photos/1373965/pexels-photo-1373965.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
        },
        {
          img: 'https://images.pexels.com/photos/879832/pexels-photo-879832.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
        },
        {
          img: 'https://images.pexels.com/photos/614484/pexels-photo-614484.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
        },
        {
          img: 'https://images.pexels.com/photos/1028223/pexels-photo-1028223.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
        }
      ],
      selection: null
    }),
  }
</script>

<style>
.v-card--active {
  transform: scale(1.1);
}
</style>