Image – Advanced Overlays (General)

[TS-VCSC-Icon-Title title=”Image Advanced Overlay Features” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”QWR2YW5jZWQlMkMlMjBGZWF0dXJlcw==” el_file1=”” el_file2=””]
[TS_VCSC_Fancy_List list_type=”image” marker_image=”http://tekanewascripts.com/composium/wp-content/plugins/ts-visual-composer-extend/images/bullets/bullet_arrow_blue.png”]

  • 30 different layouts
  • 25 text layouts and 5 icon (link) layouts
  • Show overlay on hover or at all times
  • Fully Responsive
  • Multiple trigger events (for text layouts)
  • Show / hide hover indicator handle
  • Add advanced or normal tooltip

[/TS_VCSC_Fancy_List]

[TS_VCSC_Teaser_Block_Standalone image=”18330″ overlay=”#0094ff” info_position=”top” title=”Advanced Overlays 1 – 10″ font_title_family=”Default:regular” subtitle=”View a demo of advanced overlay effects 1 – 10″ font_content_family=”Default:regular” icon_position=”top” icon=”ts-awesome-eye” link=”url:http%3A%2F%2Ftekanewascripts.com%2Fvcextensions%2Fimage-advanced-overlay-effects-1%2F|title:Image%20%E2%80%93%20Advanced%20Overlay%20(Effects%20%231)|”]
[TS_VCSC_Teaser_Block_Standalone image=”18331″ overlay=”#0094ff” title=”Advanced Overlays 11 – 20″ font_title_family=”Default:regular” subtitle=”View a demo of advanced overlay effects 11 – 20″ font_content_family=”Default:regular” icon_position=”top” icon=”ts-awesome-eye” link=”url:http%3A%2F%2Ftekanewascripts.com%2Fvcextensions%2Fimage-advanced-overlay-effects-2%2F|title:Image%20%E2%80%93%20Advanced%20Overlay%20(Effects%20%232)|”]
[TS_VCSC_Teaser_Block_Standalone image=”18332″ overlay=”#0094ff” info_position=”top” title=”Advanced Overlays 21 – 30″ font_title_family=”Default:regular” subtitle=”View a demo of advanced overlay effects 21 – 30″ font_content_family=”Default:regular” icon_position=”top” icon=”ts-awesome-eye” link=”url:http%3A%2F%2Ftekanewascripts.com%2Fvcextensions%2Fimage-advanced-overlay-effects-3%2F|title:Image%20%E2%80%93%20Advanced%20Overlay%20(Effects%20%233)|”]
[TS-VCSC-Spacer height=”20″][TS-VCSC-Icon-Title title=”Optional Click Events” align=”center” font_family=”Default:regular” size=”48″ font_weight=”300″ highlight_allow=”true” highlight_color=”#2691bd” highlight_strings=”Q2xpY2slMkMlMjBFdmVudHM=” el_file1=”” el_file2=””][TS_VCSC_Info_Notice panel_layout=”notice” panel_type=”info” panel_icon=”ts-awesome-info-circle”]

Aside from just using the advanced overlay effect without any other event or linking the advanced overlay element to another page or site, you can apply other events to the element as well.

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

YouTube in Lightbox

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Image_Hover_Effects hover_image=”16158″ effect_style_text=”ts-hover-effect-bubba” title_text=”Potsdam” content_text=”Berlins’ prettier sister and a treasure to be found!” overlay_handle_color=”#0094ff” hover_event=”youtube” hover_video_link=”https://www.youtube.com/watch?v=Fprp5Cz2BXI” tooltip_content=”Click to view YouTube video.” content_color=”#ffffff” tooltip_css=”true”]

Vimeo in Lightbox

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Image_Hover_Effects hover_image=”16162″ effect_style_text=”ts-hover-effect-honey” title_text=”Dresden” content_text=”A fairytale come true!” content_color_text=”#000000″ overlay_handle_color=”#0094ff” hover_event=”vimeo” hover_video_link=”http://vimeo.com/73485224″ tooltip_content=”Click to view Vimeo video.” content_color=”#ffffff” tooltip_css=”true”]

DailyMotion in Lightbox

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Image_Hover_Effects hover_image=”16157″ effect_style_text=”ts-hover-effect-oscar” title_text=”Berlin” content_text=”A cultural and political powerhouse!” overlay_handle_color=”#0094ff” hover_event=”dailymotion” hover_video_link=”http://www.dailymotion.com/video/xpeima_berlin-timelapse-trailer-footage-online-de_creation” tooltip_content=”Click to view DailyMotion video.” content_color=”#ffffff” tooltip_css=”true”]

Image in Lightbox

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Image_Hover_Effects hover_image=”16143″ effect_style_text=”ts-hover-effect-sarah” title_text=”Neuschwanstein” content_text=”A crazy kings dream!” overlay_handle_color=”#0094ff” hover_event=”image” tooltip_content=”Click to view larger image.” content_color=”#ffffff” tooltip_css=”true”]

Popup via Lightbox

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Image_Hover_Effects hover_image=”16144″ effect_style_text=”ts-hover-effect-steve” title_text=”Frankfurt” title_color=”#000000″ content_text=”Money rules the world!” content_color_text=”#000000″ overlay_handle_color=”#0094ff” hover_event=”popup” hover_text=”WW91JTIwY2FuJTIwY3JlYXRlJTIwYSUyMG1vcmUlMjBkZXRhaWxlZCUyMGRlc2NyaXB0aW9uJTIwb2YlMjB0aGUlMjBpbWFnZSUyMHdpdGglMjBhZHZhbmNlZCUyMG92ZXJsYXklMkMlMjB1c2luZyUyMHRoZSUyMGludGVncmF0ZWQlMjBsaWdodGJveCUyMHNvbHV0aW9uLiUyMFlvdSUyMGNhbiUyMGV2ZW4lMjB1c2UlMjBjdXN0b20lMjBIVE1MJTIwdG8lMjBjcmVhdGUlMjB0aGUlMjBkZXNjcmlwdGlvbi4=” tooltip_content=”Click to view modal popup.” content_color=”#ffffff” tooltip_css=”true”]

iFrame in Lightbox

[TS-VCSC-Divider margin_top=”0″][TS_VCSC_Image_Hover_Effects hover_image=”16168″ effect_style_text=”ts-hover-effect-jazz” title_text=”Cologne” content_text=”1248 AD – 1880 AD; the construction of a mighty cathedral!” overlay_handle_color=”#0094ff” hover_event=”iframe” tooltip_content=”Click to view website in iFrame.” content_color=”#ffffff” tooltip_css=”true” hover_link=”url:http%3A%2F%2Fwww.wikipedia.org||target:%20_blank”]