RollFade works using a simple CSS mechanism. Static content has one level of opacity applied and hovered content has another level of opacity applied. Rolling your mouse over the content results in this shift between the two opacity levels. Modern web browsers (browsers with support for hardware-accelerated animations) will fade between the two opacity levels. Using CSS results in an incredibly light-weight yet silky-smooth transitional effect, between the two states.

This stack is ideal for use with both text and images. You can use multiple RollFade stacks on the same page, and this stack will work in box fixed-width and responsive-width page layouts without any trouble. RollFade can be safely combined with free stacks like the LinkBox stack, for creating linked content. If you need a more powerful rollover effect (like the ability to swap between two content layers) consider using the HoverBox stack instead, which is very feature-rich.

Example

Here is a simple example of the RollFade stack, using a warehoused image. Static opacity was set to 99% and the hovered opacity was set to 75%. Transition speed is set to 500 milliseconds. The image is faded on mouseover:
Switzerland - A photograph by Chas Woodgate
Switzerland - A photograph by Chas Woodgate
Switzerland - A photograph by Chas Woodgate

Setup

RollFade is one of the easiest ever addon stacks to use, in the Stacks plugin:
  • Once installed drag and drop a RollFade stack from the Stacks Library into your page
  • Drag and drop content into the RollFade stack. Content can comprise of existing stacks, text or images
  • In the stack settings on the right, you can adjust the static opacity, hovered opacity and the transitional fade effect
  • Preview your page to see the RollFade stack working

Compatibility

RollFade is designed to work with all newer versions of Internet Explorer, Safari, Firefox, Opera and Chrome web browsers. It will degrade gracefully on older web browsers without support for opacity or CSS transitions (like IE7 and IE8). Compatibility with smartphones and tablet devices is mixed, due to the lack of support for hover / mouseover. Typically the content will be displayed permanently at the static level of opacity, on touch devices.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.