IMAGE SVG OVERLAY

ADD A BASIC SVG OVERLAY EFFECT TO YOUR IMAGES

Image SVG Features:

5 SVG shape combinations
Apply grayscale effect to image
Open image in lightbox or link to another page
Link only button or whole element
Apply tooltip to element to show full content
Define colors for SVG background, title, text and button

Export Page Content

[vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578142318679{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">IMAGE SVG OVERLAY</h1>
<h3 style="text-align: center;">ADD A BASIC SVG OVERLAY EFFECT TO YOUR IMAGES</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" enable_parallax="" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479838998986{margin-bottom: 0px !important;}"][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_column_text]
<h2>Image SVG Features:</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][TS_VCSC_Fancy_List list_type="image" marker_image="https://www.composium.krautcoding.com/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png"]
<ul>
 	<li style="text-align: justify;">5 SVG shape combinations</li>
 	<li style="text-align: justify;">Apply grayscale effect to image</li>
 	<li style="text-align: justify;">Open image in lightbox or link to another page</li>
 	<li style="text-align: justify;">Link only button or whole element</li>
 	<li style="text-align: justify;">Apply tooltip to element to show full content</li>
 	<li style="text-align: justify;">Define colors for SVG background, title, text and button</li>
</ul>
[/TS_VCSC_Fancy_List][TS-VCSC-Spacer height="20"][TS_VCSC_Content_Export toggle_switch="true" toggle_background="#fc6a6b" clipboard="true"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/2"][TS-VCSC-Spacer height="40"][vc_single_image image="22503" img_size="large" alignment="center" css_animation="fadeInRight"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row full_width="stretch_row_content" margin_top="0" padding_left="0" padding_right="0" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1578142342864{margin-bottom: 0px !important;background-color: #ecebe9 !important;}"][vc_column][TS-VCSC-Spacer height="20"][vc_column_text]
<h1 style="text-align: center;">SVG OVERLAY EXAMPLES</h1>
<h3 style="text-align: center;">ADD A BASIC SVG OVERLAY EFFECT TO YOUR IMAGES</h3>
[/vc_column_text][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479839441194{margin-bottom: 0px !important;}"][vc_column width="1/3"][TS-VCSC-Spacer height="40"][TS_VCSC_Image_SVG image="23568" grayscale="false" text_title="SVG Shape 1" text_content="I'm an abstract rose pattern." text_button="Click Me!" lightbox_social="false"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/3"][TS-VCSC-Spacer height="40"][TS_VCSC_Image_SVG image="23569" style="imagesvg2" grayscale="false" text_title="SVG Shape 2" text_content="It's a sunny day out there!" text_button="Click Me!" lightbox_social="false"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/3"][TS-VCSC-Spacer height="40"][TS_VCSC_Image_SVG image="23566" style="imagesvg3" grayscale="false" text_title="SVG Shape 3" text_content="A Phoenix rises from the ashes!" text_button="Click Me!" lightbox_social="false"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row][vc_row margin_top="0" padding_left="40" padding_right="40" bg_position="top" bg_repeat="no-repeat" bg_cover="false" bg_attachment="false" padding_top="30" padding_bottom="30" parallax_speed="0.1" margin_left="0" margin_right="0" css=".vc_custom_1479839448540{margin-bottom: 0px !important;}"][vc_column width="1/3"][TS-VCSC-Spacer height="40"][TS_VCSC_Image_SVG image="23567" style="imagesvg4" grayscale="false" text_title="SVG Shape 4" text_content="After the storm, there will be a rainbow!" text_button="Click Me!" lightbox_social="false"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/3"][TS-VCSC-Spacer height="40"][TS_VCSC_Image_SVG image="23565" style="imagesvg5" grayscale="false" text_title="SVG Shape 5" text_content="After the storm, there will be a rainbow!" text_button="Click Me!" lightbox_social="false"][TS-VCSC-Spacer height="40"][/vc_column][vc_column width="1/3"][TS-VCSC-Spacer height="40"][vc_column_text]
<h2 style="text-align: center;">Grayscale Effect</h2>
[/vc_column_text][TS-VCSC-Spacer height="20"][TS_VCSC_Image_SVG image="21700" text_title="Grayscale Filter" text_content="This image has a CSS3 grayscale effect!" text_button="Click Me!" lightbox_social="false"][TS-VCSC-Spacer height="40"][/vc_column][/vc_row]

Copy