Image – Adipoli

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-Icon-Title title=”Start Effects” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”U3RhcnQ=”]

Grayscale (CSS3)

[TS-VCSC-Divider][TS-VCSC-Image-Adipoli image=”16535″ adipoli_handle_show=”false”]

Overlay

[TS-VCSC-Divider][TS-VCSC-Image-Adipoli image=”16536″ adipoli_start=”overlay” adipoli_handle_show=”false”]

Washout

[TS-VCSC-Divider][TS-VCSC-Image-Adipoli image=”16537″ adipoli_start=”transparent” adipoli_handle_show=”false”]
[TS-VCSC-Spacer height=”20″ el_file=””][TS-VCSC-Icon-Title title=”Transition Effects” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”VHJhbnNpdGlvbg==”]
[TS-VCSC-Image-Adipoli image=”16523″ adipoli_hover=”popout” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Popout” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16524″ adipoli_hover=”sliceDown” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Down” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16525″ adipoli_hover=”sliceDownLeft” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Down Left” image_fixed=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”16538″ adipoli_hover=”sliceUp” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Up”]
[TS-VCSC-Image-Adipoli image=”16539″ adipoli_hover=”sliceUpLeft” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Up Left”]
[TS-VCSC-Image-Adipoli image=”16540″ adipoli_hover=”sliceUpRandom” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Up Random”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”16526″ adipoli_hover=”sliceUpDown” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Up Down” tooltip_position=”ts-simptip-position-top” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16527″ adipoli_hover=”sliceUpDownLeft” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Slice Up Down Left” tooltip_position=”ts-simptip-position-top” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16528″ adipoli_hover=”fold” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Fold” image_fixed=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”16529″ adipoli_hover=”foldLeft” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Fold Left” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16530″ adipoli_hover=”boxRandom” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Box Random” image_fixed=”true”]
[TS-VCSC-Image-Adipoli image=”16531″ adipoli_hover=”boxRain” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Box Rain” image_fixed=”true”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Image-Adipoli image=”16532″ adipoli_hover=”boxRainGrow” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Box Rain Grow”]
[TS-VCSC-Image-Adipoli image=”16533″ adipoli_hover=”boxRainReverse” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Box Rain Reverse”]
[TS-VCSC-Image-Adipoli image=”16534″ adipoli_hover=”boxRainGrowReverse” adipoli_handle_color=”#0094ff” tooltip_css=”true” tooltip_content=”Hover Effect: Box Rain Grow Reverse”]