Results 1 to 2 of 2

Thread: rollover animation

  1. #1

    Default rollover animation

    Click image for larger version. 

Name:	Capture5.jpg 
Views:	190 
Size:	28.3 KB 
ID:	2338

    Can someone please explain how to add an animation that looks like the sample from the NOF 2015 website?
    Any help would be greatly appreciated.

  2. #2
    Administrator Adam's Avatar
    Join Date
    Jan 2010
    Location
    Pennsylvania
    Posts
    357

    Default

    Quote Originally Posted by shutterspeed101 View Post
    Click image for larger version. 

Name:	Capture5.jpg 
Views:	190 
Size:	28.3 KB 
ID:	2338

    Can someone please explain how to add an animation that looks like the sample from the NOF 2015 website?
    Any help would be greatly appreciated.
    Hi,

    Here is a very short tutorial on applying the effect shown on our website to objects in Fusion 2015.

    In the Style view, click to the CSS Code tab and add the following on it's own line.

    Code:
    .css3Sample {
        transition: all 0.3s ease
    }
    .css3Sample:hover {
        border-radius: 50%
    }
    This particular effect will apply a 50% border radius on hover which will ease at .3 seconds. You can edit the class name as you wish.

    Once saved, click to the Page view and make sure the Grid inspector is open (view > grid inspector). Add or select a layout region or image. Look to the Grid inspector and locate the class field, type the class name here.

    Click image for larger version. 

Name:	grid-inspector.png 
Views:	86 
Size:	9.8 KB 
ID:	2343

    Thanks,
    Last edited by Adam; 01-15-2016 at 04:11 PM. Reason: cleared up some grammar
    Adam
    NetObjects Technical Support

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •