Image – Basic Overlay

[TS-VCSC-Icon-Title title=”Images with Basic Text Overlays” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QmFzaWMlMkMlMjBUZXh0JTJDJTIwT3ZlcmxheXM=” el_file1=”” el_file2=””]

If you want to apply an overlay, containing text and a link to another page or file to your image, Visual Composer Extensions can help you. Simply select your image and one of 8 different animations to show the overlay, enter you overlay information (title, text, link) and you’re done. It’s as simple as that.

As with all image effects included in Visual Composer Extensions, the image will show a trigger handle below the image to signal your viewers that there is more to the image than it seems. If you don’t like the handle, you can disable it for each individual image or change the color to better suit your theme.

[TS-VCSC-Spacer height=”30″ el_file=””]
[TS-VCSC-Image-Overlay image=”16144″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/” image_width_percent=”100″]
[TS-VCSC-Image-Overlay image=”16164″ hover_type=”ts-imagehover-style2″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/” image_width_percent=”100″]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Spacer height=”30″ el_file=””]
[TS-VCSC-Image-Overlay image=”16167″ hover_type=”ts-imagehover-style3″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/”]
[TS-VCSC-Image-Overlay image=”16137″ hover_type=”ts-imagehover-style4″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Spacer height=”30″ el_file=””]
[TS-VCSC-Image-Overlay image=”16158″ hover_type=”ts-imagehover-style5″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/”]
[TS-VCSC-Image-Overlay image=”16162″ hover_type=”ts-imagehover-style6″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/”]
[TS-VCSC-Spacer height=”20″]
[TS-VCSC-Spacer height=”30″ el_file=””]
[TS-VCSC-Image-Overlay image=”16157″ hover_type=”ts-imagehover-style7″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/” hover_handle_show=”true” hover_handle_color=”#0094FF” tooltip_position=”ts-simptip-position-top”]
[TS-VCSC-Image-Overlay image=”16168″ hover_type=”ts-imagehover-style8″ overlay_handle_color=”#0094ff” title=”Hover Image” message=”Check out this cool hover image effect!” button_url=”http://www.google.com/” tooltip_position=”ts-simptip-position-top”]