<template>
  <span class="hover">
    <slot />
  </span>
</template>

<style scoped>
.hover {
  position: absolute;
}

:deep(img) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

:deep(img):nth-child(2) {
  opacity: 0;
  transition: opacity 0.3s ease;
  transform: translate3d(0, 0, 0);
}

.hover:hover :deep(img):nth-child(2) {
  opacity: 1;
}
</style>
