Move an image in state button as a rollover

[Mattmcquiff]

I've been using the state button and I have an image and I can apply rollover effects like shadow etc. but I am trying to change its position so to move a the picture up by 15px upwards. but keep the animation of it smooth. Is this possible?

[David Asch · Accepted solution]

This isn't currently possible. You can apply transitions between states but it would only fade between them, which is not the effect you want. To do this properly would require CSS animation or you could create the object in Animate and import it.

David

Creative Muse

[Ussnorway]

A little context for those who haven't seen the forum post would be nice

just to show an example of basic transition (I think this one was made by Günter Heißenbüttel​?)... your image has 9 points and therefore 3-8 ways to move... I've seen very good picture sprites (think space invaders type animation) using this effect but yes, payed 3rd party widgets have some nice outcomes as well.

[Mattmcquiff]

Yes I Saw this one, on this forum, will remember for future use. problem is mine is a photo and this is solid graphics.

Many thanks

[David Asch]

Ussnorway  wrote

Pretty video, Ussnorway . A little context for those who haven't seen the forum post would be nice

[Pavel_Homeriki]

///Pretty video, Ussnorway . A little context for those who haven't seen the forum post would be nice///

----------------------------

Mr. moderator, you broke this post

------------------------------

Here is the link I attached Home

[dodger50]

Muse Themes do some great widgets that work along those lines. You can change the position of the image in different states if it's a background image, or even import a different image for different states which I've used to change the colour of an icon upon rollover etc...

[Mattmcquiff]

I have found this one

https://musewidgets.com/collections/widgets/products/hover-animation-effects

Not entirely sure how to use it though?

Downloaded it but don't appear to have any options

[dodger50]

Have a look at this one. Very simple to use and there's a tutorial on how to set up. If you're using Muse a lot, may be worth subscribing rather than one off purchase. Have a look through all their widgets.

https://www.muse-themes.com/products/hover-reveal

[Mattmcquiff]

Needless to say I'm looking for free.

Although this is perhaps a messy route, especially as I know nothing about html,I found this.

I actually have a state button on the screen nothing else, removed styling then added a fill image.

then > insert html>

<style>
div {
    width: 200px;
    height: 200px;
    background: red;
    -webkit-transition: width 2s, height 4s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s, height 0.5s;
}
div:hover {
    width: 220px;
    height: 220px;
}
</style>

this had the side effect of effecting my image Although not sure how??

[Günter Heißenbüttel]

Mattmcquiff  schrieb

II have an image and I can apply rollover effects like shadow etc. but I am trying to change its position so to move a the picture up by 15px upwards. but keep the animation of it smooth. Is this possible?

Yes, it is possible. Look at this .muse file: https://www.dropbox.com/s/heij7i2vwmsvdbj/Moving_Arrow.zip?dl=0

[Mattmcquiff]

Many Thanks

This is useful although I don't think it quite works for what I need.

This is the effect that I am looking for

www.matthewjchild.co.uk  it was originally done through 500px See how the thumbnails at the bottom lift up?

[dodger50]

Search through youtube to find the type of animation effect you're after... There is one that shows the CSS to add into the HTML addition panel although I can't locate it at present. Found this though:

Animated Rollover Buttons - Muse Transitions Widget | MuseThemes.com - YouTube

Sorry for the lack of context - how do I feature a post text in may reply?

[Ussnorway]

Mattmcquiff  wrote

Many Thanks

This is useful although I don't think it quite works for what I need.

This is the effect that I am looking for

www.matthewjchild.co.uk  it was originally done through 500px See how the thumbnails at the bottom lift up?

thats a basic trans and Muse can do it out of the box

temp link = pop

p.s, imo some of the 3rd party widgets are still worth it as they add nice effects but its your $