Earlier I’ve written on how you can enlarge on shrink an image on mouse hover in Vue.js. Now in this article, I’ll show you how you can float an image on mouse hover in Vue.js. First, we’re going to have an image with some default CSS properties. Like predefined height, transition, etc. We’ll also have another class with some additional properties which’ll make the image look like it’s floating or to give it a 3D look. We’ll bind this class to the original image on hover. We can attain that by binding the reactive state to a CSS class. Here I’ve written the code for the same:

<template>
  <div id="app">
    <div>
      <div class="np-credits">wwww.nightprogrammer.com</div>
      <img
        :src="$options.imgUrl"
        :class="{
          'img-default-size': true,
          'img-elevated-size': imageElevated,
        }"
        @mouseover="floatImage"
        @mouseout="shrinkImage"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "ImageFloat",
  created() {
    this.$options.imgUrl =
      "https://images.unsplash.com/photo-1480796927426-f609979314bd";
  },
  data() {
    return {
      imageElevated: false,
    };
  },
  methods: {
    shrinkImage() {
      this.imageElevated = false;
    },
    floatImage() {
      this.imageElevated = true;
    },
  },
};
</script>

<style>
.img-default-size {
  height: 200px;
  transition: all 0.3s;
}

.img-elevated-size {
  height: 250px;
  transition: all 0.3s;
  box-shadow: 6px 6px 20px rgb(66, 66, 66);
  transform: rotate(-3deg);
}

.np-credits {
  font-size: 12px;
  margin-bottom: 12px;
  color: #4b4b4b;
}
</style>
Code language: HTML, XML (xml)

You can find a working demo of the above code from my repos below:

Codesandbox / Demo | Github