Hover for IMages - RocketCake Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > RocketCake
	Hover for IMages

guest_David Guest
Quote
2025-08-19 16:57:56

Is it possible to add a hover effect to images/containers that makes the image slightly larger? I can't do it with CSS and ChatGPT.

niko Moderator
Quote
2025-08-20 07:21:52

An upcoming update of RocketCake will have built this in, but for now, you need to set the css code for this manually. But it's still relatively easy. Do it like this:

Right-click the image or container, select "HTML Code" and find it's ID, it's usually something like

button_1fa0001a

Then, select View -> HTML Code of page -> Additional CSS styles and paste this:

button_1fa0001a:hover 
{
animation: scaleimage 2s; animation-fill-mode: forwards;
}

@keyframes scaleimage
{
   0%   { transform: scale(1,1); }
   100% { transform: scale(1.1,1.1); }
}

But be sure to replace the "button_1fa0001a" at the beginning with the ID of your button.

guest_David Guest
Quote
2025-08-20 08:13:53

It doesn't quite work.

Here's the HTML for the image:
https://ibb.co/5x6FsdyX

and here's the CSS for the index.html:
https://ibb.co/WWmc8rHJ

guest_David Guest
Quote
2025-08-20 08:17:23

There's a typo in the ID. I've corrected it, but I don't want to. There's also a space at the beginning and end.

guest_David Guest
Quote
2025-08-20 08:22:42

I'm looking forward to the next update.
Maybe the things you wanted to include in my last posts will be there too.

Thanks for the tip about only doing it in the global CSS.

This is how I've managed it now:

img_3f14847d {
transition: transform 0.3s ease; /* smooth animation */
}

img_3f14847d:hover {
transform: scale(1.1);
}

niko Moderator
Quote
2025-08-21 07:09:05

Yes, before the ID (like button_1fa0001a) you need to insert the hashtag character to make it work, the forum swallows that character unfortunately.

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons