# How can i create this hover effect

**URL:** <https://forum.readymag.com/t/how-can-i-create-this-hover-effect/2371>\
**Category:** Animations\
**Created:** [January 11, 2024, 12:44pm UTC](https://forum.readymag.com/t/how-can-i-create-this-hover-effect/2371 "2024-01-11T12:44:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jase777](https://avatars.discourse-cdn.com/v4/letter/j/e95f7d/32.png) [@jase777](https://forum.readymag.com/u/jase777)\
**Post date:** [January 11, 2024, 12:44pm UTC](https://forum.readymag.com/t/how-can-i-create-this-hover-effect/2371/1 "2024-01-11T12:44:53Z")

</div>

> **[Enso Magazine by Readymag — Page 1](https://enso.readymag.com/)**
>
> A magazine by Readymag that tells the stories of prominent design objects and the lives of their creators

when the user hovers over the text, the background image changes ?

---

<div class="post-metadata">

**Author:** ![Julia\_Kulbaczewska](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/julia_kulbaczewska/32/1630_2.png) [@Julia\_Kulbaczewska](https://forum.readymag.com/u/Julia_Kulbaczewska)\
**Post date:** [January 13, 2024, 2:12pm UTC](https://forum.readymag.com/t/how-can-i-create-this-hover-effect/2371/2 "2024-01-13T14:12:12Z")

</div>

Hey,

I can see this way of doing it:

1. Place the image and scale it up as your background.
2. Create the button that will be used for displaying the image.
3. Make the image appear on hover by animating the image (Click: Animation → Animate on Hover → Opacity from 0 to 100).
4. But to activate the animation you will need to use your button (Click: Triggers, and choose your button).

Now the image appears only when you hover over the button. Next you have to stack the images on top of each other, create buttons that will activate them (triggers), and create the animations for each of them.

I hope that helps!😊

 ![Screenshot 2024-01-13 at 15.09.24](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/7/7f5533bf698d1ac123f06dfaf27ac0b72ae99e92.png)

---

<div class="post-metadata">

**Author:** ![David\_Flores](https://avatars.discourse-cdn.com/v4/letter/d/b77776/32.png) [@David\_Flores](https://forum.readymag.com/u/David_Flores)\
**Post date:** [February 25, 2024, 12:44am UTC](https://forum.readymag.com/t/how-can-i-create-this-hover-effect/2371/3 "2024-02-25T00:44:08Z")

</div>

Is there a way to keep the image from disappearing once the cursor is moved from the trigger?