Add a Fade Effect in NetObjects Fusion Using CSS3
From Documentation
This page is a translated version of the page Add a Fade Effect in NetObjects Fusion Using CSS3 and the translation is 100% complete.
Contents
Add a Fade Effect in NetObjects Fusion Using CSS3
You can easily add a fade effect on objects in your website using CSS3 in NetObjects Fusion. This tutorial will walk you through the process step by step.
Requirements
- Custom CSS needs to be input into the Style view of NetObjects Fusion.
Editing the Fade Effect Style
Below is a basic style for the fade effect but you can edit as needed via the Style view.
Here is the basic Style we’ve created:
.fade {
opacity: 1;
transition: opacity .30s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
opacity: 1;
transition: opacity .30s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
- Copy the code above.
- Open NetObjects Fusion to the Style view for your website project.
- If the Read Only option is checked in the Style properties palette, uncheck it.
- Click on the CSS Code tab.
- Scroll to a blank line in your CSS.
- Paste the code here.
- Click to the Graphic tab, you will be prompted to save, do so.
Apply the Fade Effect to text
From the Page view:
- Highlight the text you wish to have fade out.
- From the Text Properties palette, locate .fade Style from the drop down menu.
- Once applied, preview or publish your site to view the effect.
Apply the Fade Effect to images
From the Page view:
- Select or place an image on your page.
- With the image selected, locate and click the HTML button in the Picture Properties palette.
- Add the CSS Class Name (class="fade") after the end of the img code and before the end tag.
It should look like the following:
- Click OK.
Once applied, preview or publish your site to view the effect.