Image – Switch

Whenever you want to just “switch” out an image for another when a user hovers over or clicks on one image, we got you covered. Visual Composer Extension includes the “Image Switch” Element, which allows you to do just that. Just select the front and back image, assign the trigger for the switch (hover, click or slide) and the type of switch effect (fade or or flip) and the plugin will take care of the rest. You can show little trigger handles below the image that indicate to your users what to do in order to trigger the switch. If you don’t need the handles, you can disable them for each element or change the color to better suit your theme.

[TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

Front and back image should have equal dimensions or at least the same ratios for scaling purposes.

[/TS_VCSC_Info_Notice][TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Image Switch Styles” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”U3R5bGVz”]

Switch Type: Flip / Switch Trigger: Click

[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16076″ image_end=”16075″ switch_handle_color=”#0094ff” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top” switch_handle=”#1e73be”]

Switch Type: Slide

[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16080″ image_end=”16079″ switch_type=”ts-imageswitch-slide” switch_handle_color=”#0094ff” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top”]

Switch Type: Fade / Switch Trigger: Hover

[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16065″ image_end=”16066″ switch_type=”ts-imageswitch-fade” switch_trigger_fade=”ts-trigger-hover” switch_handle_color=”#0094ff” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top”]

Switch Type: Flip / Switch Trigger: Hover

[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16067″ image_end=”16068″ switch_trigger_flip=”ts-trigger-hover” switch_handle_color=”#0094ff” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top” switch_handle=”#1e73be”]

Switch Type: Fade / Switch Trigger: Click

[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16072″ image_end=”16073″ switch_type=”ts-imageswitch-fade” switch_handle_color=”#0094ff” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top”]

Switch Type: Flip / Switch Trigger: Click

– Text Overlay –
[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16076″ image_end=”16075″ switch_handle_color=”#0094ff” switch_overlay=”text” overlay_text=”Fashion Choices” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top” switch_handle=”#1e73be”]

Switch Type: Slide

– Image Overlay –
[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16080″ image_end=”16079″ switch_type=”ts-imageswitch-slide” switch_handle_color=”#0094ff” switch_click=”false” switch_overlay=”image” overlay_remove=”true” overlay_image=”17852″ link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top”]

Switch Type: Fade / Switch Trigger: Hover

– Text Overlay –
[TS-VCSC-Divider][TS-VCSC-Image-Switch image_start=”16065″ image_end=”16066″ switch_type=”ts-imageswitch-fade” switch_trigger_fade=”ts-trigger-hover” switch_handle_color=”#0094ff” switch_click=”false” switch_overlay=”text” overlay_text=”Fashion Choices” link_apply=”false” link_target=”_parent” tooltip_position=”ts-simptip-position-top”]