<template>
  <div>
    <v-hover v-slot="{ isHovering, props }">
      <v-card
        class="mx-auto"
        color="grey-lighten-4"
        max-width="600"
        v-bind="props"
      >
        <v-img
          :aspect-ratio="16/9"
          src="https://cdn.vuetifyjs.com/images/cards/kitchen.png"
          cover
        >
          <v-expand-transition>
            <div
              v-if="isHovering"
              class="d-flex bg-orange-darken-2 v-card--reveal text-display-large"
              style="height: 100%;"
            >
              $14.99
            </div>
          </v-expand-transition>
        </v-img>

        <v-card-text class="pt-6">
          <div class="font-weight-light text-grey text-title-large mb-2">
            For the perfect meal
          </div>

          <h3 class="text-headline-large font-weight-light text-orange mt-0 mb-2">
            QW cooking utensils
          </h3>

          <div class="font-weight-light text-title-large mb-2">
            Our Vintage kitchen utensils delight any chef.<br>
            Made of bamboo by hand
          </div>
        </v-card-text>
      </v-card>
    </v-hover>
  </div>
</template>

<style>
  .v-card--reveal {
    align-items: center;
    bottom: 0;
    justify-content: center;
    opacity: .9;
    position: absolute;
    width: 100%;
  }
</style>
