DEV Community

Cover image for Change picture on hover with Vue
Christophe
Christophe

Posted on

6 3

Change picture on hover with Vue

For example, you want to make a portfolio of your projects. It would be a cool feature on your website to have the picture of your project move on hover.

With this small tutorial, it will allow you to activate a .gif when hovered over a picture.

1. Set up vue project

Create your vue-project, follow the steps and cd into it.



vue create vue-hover-picture


Enter fullscreen mode Exit fullscreen mode

2. Clean up project

For this, we'll stick to the HelloWorld.vue component. Get rid of all the code in both HelloWorld.vue and the App.vue component.

Load the image in the HelloWorld.vue component, like below.



<template>
  <div class="hello">
    <img :src="pictureStatic">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      pictureStatic: require("../assets/todo.png")
    }
  }
}
</script>

<style scoped> 
img {
  height: 500px;
}
</style>


Enter fullscreen mode Exit fullscreen mode

We now have a picture loaded in our component. We want this picture to become a .gif when we're hovering.

3. Hover function

In vue, we can use @mouseover and @mouseleave events. We can pass in the boolean hover where it will be true in the @mouseover event and, surprise, false with @mouseleave.

As we're using this in our code and using it further on in a function, add it to our data and set it to false. Let's also import our .gif.



export default {
  name: 'HelloWorld',
  data () {
    return {
      pictureStatic: require("../assets/todo.png"),
      pictureGif: require("../assets/todo.gif"),
      hover: false
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

Next, we are going to use a function to determine the src of our image, whether it's hovered or not.

Add the computed part and write a new function, let's call it pictureHover. So we can write out a simple function, using hover as our conditional statement.



computed: {
    pictureHover () {
      if (this.hover == true) {
        return this.pictureGif
      } else {
        return this.pictureStatic
      }
    }
  }


Enter fullscreen mode Exit fullscreen mode

Now we should change our html code of the image. We can pass in this function pictureHover() to our src attribute of our image:



<img :src="pictureHover" @mouseover="hover = true" @mouseleave="hover = false">


Enter fullscreen mode Exit fullscreen mode

And that's it! You can now put in a small live preview of your project when people hover over the picture.

dev

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (2)

Collapse
 
david_iiii profile image
David Juez • Edited

Hello
Have you solved the problem of constant request for resources?

dev-to-uploads.s3.amazonaws.com/up...

Collapse
 
aeadedoyin profile image
Adedoyin Akande

Keep static image files in

/static/images folder.
That way it never gets rebuilt.

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay