Stacks Image 6

Rinse

Desaturated image hover effects.

Rinse

Create greyscale image hover effects from a single colour image.

Overview.

Cross browser support : When viewed in a webkit based browser the stack applies the effect using pure CSS. When viewed in any other browser (without support), the javascript kicks in and renders the effect.

New edit mode view : The stack has a great new development in edit mode. When dropping your images into the stack, you will instantly see a duplicate image with the effect applied, either normal or inverted. (see edit mode below).

Invert : You can choose to have the images display as greyscale on page load, and then revert to colour on hover. Or select Invert, to start out colour and switch to greyscale on hover.

Rinse intensity : You can choose how intense the desaturation effect is seen. You have options of Full desaturation, Strong, Medium, and Low.

Instant download.

Version : 1.0.2

Responsive : Yes

First released : 19/2/2016

Last Updated : 10/6/2016

Stacks V 3.0 or greater.

Default demo.

With all the default settings applied, any image you drop into the stack will be displayed in 100% grayscale. And revert to 100% colour when hovered. Default transition speed is medium (300ms).

Stacks Image 637
Stacks Image 641

Inverted.

With the invert setting selected, your original colour image will be displayed, and will switch to greyscale only when hovered.

Stacks Image 651
Stacks Image 655

Transition speeds.

You can choose the speed of the transition hover effect. Available speeds below. (There is also an instant option).

FAST

Stacks Image 667

MEDIUM

Stacks Image 673

SLOW

Stacks Image 679

SUPER SLOW

Stacks Image 685

Rinse intensity.

You can choose how intense the desaturation effect is seen. You have options of Full desaturation, Strong, Medium, and Low.

FULL

Stacks Image 697

STRONG

Stacks Image 703

MEDIUM

Stacks Image 709

LOW

Stacks Image 715

Stacks image effects.

Any image effects you apply to your image through Stacks built in options for borders, drop shadow, etc, will be respected by the stack, regardless of device size.

Stacks Image 725
Stacks Image 729
Stacks Image 733
Stacks Image 737

No hover transition.

You don’t have to have a hover effect at all if you don’t want that. Just deselect the hover effect option to have your colour image rinsed and displayed as greyscale.

Stacks Image 747
Stacks Image 751

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Has hover effect

Deselect to simply present your image in greyscale without any hover effect.

Rinse intensity

This is the amount of colour that will be rinsed from your image for the hover effect. (the desaturation amount).

Transition time

You can choose slow, medium or fast hover transition speeds.

Invert effect

Select to start out with a colour image and switch to greyscale on hover.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Just treat the stack as you would any other default image stack.

Stacks Image 786

The new duplicate image view shows you the effect applied to a duplicate image instantly.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™

Rinse Stack