# Image Element Hover **URL:** \ **Category:** Elements\ **Created:** [July 11, 2025, 8:48am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764 "2025-07-11T08:48:29Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\ **Post date:** [July 11, 2025, 8:48am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/1 "2025-07-11T08:48:29Z")
Unfortunately, the image element doesn’t support hover. I imagine a face with closed eyes, and when hovered, the eyes are open. Would that be possible? Or can it, and I just haven’t found it? ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [July 11, 2025, 9:44am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/2 "2025-07-11T09:44:52Z")
Guess you mean something like below. Normal state: ![A bold black smiley face with closed, upward-pointing eyes and a wide smile is displayed on a muted greenish-grey background, framed by a container outline with a blue 'Container' label in the top left corner. (Captioned by AI)](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/4/447faee2b9141efc29c29a366eb9ba57a3e0cad3.png) Hover state: ![A bold black sad face emoji is centred on a red background with a small blue label in the top left corner that says 'Container'. (Captioned by AI)](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/4/b4f74814e06595066d9ae9e721b1cf995d9c7527.png) That is absolutely possible, but it is not done with some mouse clicks on some image settings. If this is what you need I can upload for you the example I just created. ---
**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\ **Post date:** [July 11, 2025, 9:59am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/3 "2025-07-11T09:59:04Z")
Yes please. ---
**Author:** ![pumpkin](https://avatars.discourse-cdn.com/v4/letter/p/ccd318/32.png) [@pumpkin](https://forums.realmacsoftware.com/u/pumpkin)\ **Post date:** [July 11, 2025, 10:07am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/4 "2025-07-11T10:07:33Z")
Instead of using the image component, use a container. There you can set an image as background and change it on hover. ---
**Author:** ![WeaverPixel](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/weaverpixel/32/25453_2.png) [@WeaverPixel](https://forums.realmacsoftware.com/u/WeaverPixel)\ **Post date:** [July 11, 2025, 10:38am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/5 "2025-07-11T10:38:29Z")
Here it is @Ulrich … [elementsapp://downloadDocument/k7Mnnp2Z7Si5](elementsapp://downloadDocument/k7Mnnp2Z7Si5) Should look like this one ![A user interface design tool displays a layout with three icons: a happy face, a magnifying glass with a plus sign, and a check mark, each within rounded rectangles on a grey-green background. (Captioned by AI)](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/f/bf98dfc414e73bbe63f9d363d45d0566b565a44d.png) I did it somehow as @pumpkin said I put SVGs in 2 different container. ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/4/a41c30220676d2791550cd5fa284fb5e9c7fc7f2.png) You can replace the SVG with Image or as @pumpkin said you also can use the background of the Container. An important setting is in the Container with the SVGs (the underlying one with the second “red” background. Look at the “layout” settings. The Position is set to “Absolute”. With this setting the one Container is exactly over the other. ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/0/002a28677207db339fa9c80f4a44293c101510f2.png) Another setting is the transition effect set to Duration 0. It now switches immediately from the one SVG to the other ![image](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/5/25cfc4036f963313a86059871e9b124bce309a2f.png) ---
**Author:** ![Ulrich](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ulrich/32/29764_2.png) [@Ulrich](https://forums.realmacsoftware.com/u/Ulrich)\ **Post date:** [July 11, 2025, 1:02pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/6 "2025-07-11T13:02:59Z")
That’s a great idea to make it about size. **Thanks** for that. I’ll try it out. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [July 11, 2025, 2:50pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/7 "2025-07-11T14:50:01Z")
If you need something simpler, you could also do this with a Container or a Button… ---
**Author:** ![robbo67](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/robbo67/32/30697_2.png) [@robbo67](https://forums.realmacsoftware.com/u/robbo67)\ **Post date:** [August 26, 2025, 6:03pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/8 "2025-08-26T18:03:25Z")
@dan can you explain how to do this? I would like to have one image show on the page and then another overlay that image with a different image when I rollover. It looks similar to what you have demonstrated, just not quite sure how to do it! Thanks ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 26, 2025, 6:50pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/9 "2025-08-26T18:50:42Z")
Yes, I’d do this with a Button Component, here’s how to set it up: ---
**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\ **Post date:** [August 26, 2025, 7:22pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/10 "2025-08-26T19:22:24Z")
Great , more stuff like this … @dan ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 26, 2025, 8:35pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/11 "2025-08-26T20:35:38Z")
@dan I’d like to see something like this, but instead of switching from one image to another, it switches from an image to some content in a container, like a header, text, and button. I have a way to do this, but it is done by sliding the content in from out of view. I’d prefer to do it by changing the opacity. ---
**Author:** ![robbo67](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/robbo67/32/30697_2.png) [@robbo67](https://forums.realmacsoftware.com/u/robbo67)\ **Post date:** [August 26, 2025, 9:04pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/12 "2025-08-26T21:04:59Z")
@dan - thanks for taking the time to explain this. This looks really simple to implement (once you know how!) and is just what I need. Thanks! ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [August 26, 2025, 9:42pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/13 "2025-08-26T21:42:39Z")
Thanx great idea - will use this a lot… ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [August 27, 2025, 7:10am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/14 "2025-08-27T07:10:41Z")
> [@handshaper](#): > > it switches from an image to some content in a container, like a header, text, and button. I have a way to do this, but it is done by sliding the content in from out of view. I’d prefer to do it by changing the opacity. I think I know what you’re after, and it’s easy to build with a couple of the built in components, here’s a video showing how I’d build something like this 🙂 Here [the project from the video](elementsapp://downloadDocument/NI5WeTOPoHVj), for those that want to have a play with this stuff 🙂 ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 27, 2025, 4:16pm UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/15 "2025-08-27T16:16:15Z")
@ben That was very handy, thanks for doing that. I’ll play with it some more. I wanted to do something that did more of a 3D flip, so I wrote one with the help of our friendly bot. It works reasonably well, but we discovered that several Tailwind classes did not appear to be available to make this more Tailwind-like. This meant that the styling was being handled in more older CSS style. It works, but could be more polished. I’m in the process of trying to turn this into a custom component. Could something like this be done without writing a custom component? See below. ![CleanShot 2025-08-27 at 06.11.03](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/b/2b38923cbe0b67bd2635919153bccdb05f72b32a.gif) ---
**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\ **Post date:** [August 28, 2025, 5:33am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/16 "2025-08-28T05:33:57Z")
I ended up going down the custom component approach for something like this but with more of a 3D flip. I think it works well, but it is in need of more properties to make it complete. Here is what it looks like on a live site. ![CleanShot 2025-08-27 at 19.31.00](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/0/6028129475141cd4fe0b12f7310b5164cc243e60.gif) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 28, 2025, 10:16am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/17 "2025-08-28T10:16:18Z")
That really does look awesome, nice work 🥰 ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [August 28, 2025, 11:56am UTC](https://forums.realmacsoftware.com/t/image-element-hover/48764/18 "2025-08-28T11:56:31Z")
Very cool 😎 good job!!!