Highlighted

Adding mouse out animation to Muse

Participant ,
Oct 11, 2017

Copy link to clipboard

Copied

It would be great if the chaps at Muse could add a little extra button state for mouse out on items. I know its not standard CSS, which is why it probably has been implemented.

Nonetheless, I am pretty sure it would be quite simple to customise the CSS. So my question is this: Given that I have a simple colour transition from one colour to the next already set in Muse. If I define the button as a graphic style, and thus a class - What do I need to add into the page CSS to define it to animate on "out".


I found this handy little bit of CSS that does it with opacity, but I want to just do it to the existing muse :hover transition:

.item {  

    height:200px;

    width:200px;

    background:red;

    -webkit-transition: opacity 1s ease-in-out;

       -moz-transition: opacity 1s ease-in-out;

        -ms-transition: opacity 1s ease-in-out;

         -o-transition: opacity 1s ease-in-out;

            transition: opacity 1s ease-in-out;

}

.item:hover {

    zoom: 1;

    filter: alpha(opacity=50);

    opacity: 0.5;

}

From:

Edit fiddle - JSFiddle

Sorry folks. I think I sorted this out. Just add a transition to the initial NORMAL state and the button will animate on OUT.

I am being daft.

Views

146

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adding mouse out animation to Muse

Participant ,
Oct 11, 2017

Copy link to clipboard

Copied

It would be great if the chaps at Muse could add a little extra button state for mouse out on items. I know its not standard CSS, which is why it probably has been implemented.

Nonetheless, I am pretty sure it would be quite simple to customise the CSS. So my question is this: Given that I have a simple colour transition from one colour to the next already set in Muse. If I define the button as a graphic style, and thus a class - What do I need to add into the page CSS to define it to animate on "out".


I found this handy little bit of CSS that does it with opacity, but I want to just do it to the existing muse :hover transition:

.item {  

    height:200px;

    width:200px;

    background:red;

    -webkit-transition: opacity 1s ease-in-out;

       -moz-transition: opacity 1s ease-in-out;

        -ms-transition: opacity 1s ease-in-out;

         -o-transition: opacity 1s ease-in-out;

            transition: opacity 1s ease-in-out;

}

.item:hover {

    zoom: 1;

    filter: alpha(opacity=50);

    opacity: 0.5;

}

From:

Edit fiddle - JSFiddle

Sorry folks. I think I sorted this out. Just add a transition to the initial NORMAL state and the button will animate on OUT.

I am being daft.

Views

147

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 11, 2017 0
Participant ,
Oct 11, 2017

Copy link to clipboard

Copied

Sorry folks. I think I sorted this out. Just add a transition to the initial NORMAL state and the button will animate on OUT.

I am being daft.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 11, 2017 0