<template>
  <v-row>
    <v-col cols="12" sm="6">
      <v-img
        class="border-dotted"
        height="300"
        image-class="transition-400 hover:scale-110 hover:rotate-2"
        src="https://picsum.photos/400/600?image=136"
      ></v-img>
    </v-col>

    <v-col cols="12" sm="6">
      <v-img
        class="border-dotted"
        color="yellow"
        height="300"
        image-class="transition-400 hover:scale-90 rounded-pill elevation-2"
        rounded="pill"
        src="https://picsum.photos/400/400?image=128"
        cover
      ></v-img>
    </v-col>
  </v-row>
</template>

<style scoped>
  /* expected to be generated by UnoCSS */
  ::v-deep(.transition-400) { transition: all .4s cubic-bezier(0.4, 0, 0.2, 1); }
  ::v-deep(.hover\:scale-90:hover) { scale: 90%; }
  ::v-deep(.hover\:scale-110:hover) { scale: 110%; }
  ::v-deep(.hover\:rotate-2:hover) { transform: rotate(2deg); }
</style>
