[TS-VCSC-Spacer height=”20″]

IMAGE ADIPOLI

SPICE UP YOUR IMAGES WITH ADIPOLI EFFECTS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

The “Image Adipoli” element allows you to apply some hover transition effects to your images. There are three base pattern that can be applied to the image and there are 16 transition effects to turn the base pattern back into the original image. For the purpose of this demonstration, all transition effects will be shown using the “Grayscale” (CSS3) base pattern. The little handle below each image serves as a hint to your viewers that there is some kind of effect associated with the image when hovering. The handle can be disabled for each element and you can also change the handle color to better suit your theme. Furthermore, you can assign a CSS3 tooltip to each image.

[TS-VCSC-Spacer height=”20″][TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″]

ADIPOLI START EFFECTS

SPICE UP YOUR IMAGES WITH ADIPOLI EFFECTS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″]

Grayscale (CSS3)

[TS-VCSC-Spacer height=”20″][TS-VCSC-Image-Adipoli image=”21913″ adipoli_handle_show=”false”]

Overlay

[TS-VCSC-Spacer height=”20″][TS-VCSC-Image-Adipoli image=”21914″ adipoli_start=”overlay” adipoli_handle_show=”false”]

Washout

[TS-VCSC-Spacer height=”20″][TS-VCSC-Image-Adipoli image=”21915″ adipoli_start=”transparent” adipoli_handle_show=”false”]
[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”20″]

ADIPOLI HOVER EFFECTS

SPICE UP YOUR IMAGES WITH ADIPOLI EFFECTS

[TS-VCSC-Spacer height=”40″]
[TS-VCSC-Spacer height=”40″ el_file=””]
[TS-VCSC-Image-Adipoli image=”21916″ adipoli_hover=”popout” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Popout” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”21919″ adipoli_hover=”sliceDown” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Down” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”21921″ adipoli_hover=”sliceDownLeft” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Down Left” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”21923″ adipoli_hover=”sliceUp” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Up” tooltip_css=”true”]
[TS-VCSC-Image-Adipoli image=”21925″ adipoli_hover=”sliceUpLeft” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Up Left” tooltip_css=”true”]
[TS-VCSC-Image-Adipoli image=”21929″ adipoli_hover=”sliceUpRandom” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Up Random” tooltip_css=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”9667″ adipoli_hover=”sliceUpDown” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Up Down” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”9665″ adipoli_hover=”sliceUpDownLeft” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Slice Up Down Left” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”9664″ adipoli_hover=”fold” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Fold” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”16165″ adipoli_hover=”foldLeft” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Fold Left” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16158″ adipoli_hover=”boxRandom” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Box Random” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16142″ adipoli_hover=”boxRain” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Box Rain” tooltip_css=”true” image_fixed=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”16125″ adipoli_hover=”boxRainGrow” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Box Rain Grow” tooltip_css=”true”]
[TS-VCSC-Image-Adipoli image=”16108″ adipoli_hover=”boxRainReverse” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Box Rain Reverse” tooltip_css=”true”]
[TS-VCSC-Image-Adipoli image=”16107″ adipoli_hover=”boxRainGrowReverse” adipoli_handle_color=”#0094ff” tooltip_content=”Hover Effect: Box Rain Grow Reverse” tooltip_css=”true”]
[TS-VCSC-Spacer height=”40″]