{"id":550,"date":"2017-02-28T20:07:11","date_gmt":"2017-02-28T20:07:11","guid":{"rendered":"http:\/\/themenectar.com\/demo\/salient-promo\/?page_id=409"},"modified":"2023-05-18T13:56:13","modified_gmt":"2023-05-18T13:56:13","slug":"image-with-hotspots","status":"publish","type":"page","link":"https:\/\/themenectar.com\/salient\/elements\/image-with-hotspots\/","title":{"rendered":"Image With Hotspots"},"content":{"rendered":"[vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][nectar_image_with_hotspots image=”3837″ preview=”https:\/\/themenectar.com\/salient\/wp-content\/uploads\/sites\/4\/2021\/05\/brooke-cagle-LCcFI_26diA-unsplash.jpg” color_1=”Extra-Color-2″ hotspot_icon=”plus_sign” tooltip=”hover” tooltip_shadow=”large_depth” animation=”true”][nectar_hotspot left=”10.0014%” top=”59.8953%” position=”right”]\n

Black Couch<\/h4>\n

Gorgeous responsive hotspots added from a visual, drag and drop user interface[\/nectar_hotspot][nectar_hotspot left=”58.37520938023451%” top=”42.819757124872766%” position=”top”]\n

Red Sweatshirt<\/h4>\n

You can choose the position of the tooltips very easily[\/nectar_hotspot][nectar_hotspot left=”86.8265%” top=”25.2053%” position=”left”]\n

Faux Plant<\/h4>\n

Hotspots can make it easy to explain the details of an image in an exciting way[\/nectar_hotspot][nectar_hotspot left=”52.93132328308208%” top=”65.26808673059409%” position=”top”]\n

Work Laptop<\/h4>\n

Use it to highlight or explain areas of interest of an image[\/nectar_hotspot][\/nectar_image_with_hotspots][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#ffffff” scene_position=”center” top_padding=”100″ bottom_padding=”100″ text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1620683243331{margin-bottom: 10px !important;}”]\n

Non Fullwidth, & Click Triggered Example<\/h3>\n[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” left_padding_desktop=”8%” constrain_group_2=”yes” right_padding_desktop=”8%” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” centered_text=”true” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1488314114304{margin-bottom: 50px !important;}” max_width=”650″]\n

You can constrain the hotspots to any column width and easily change the functionality of how the tips are shown. Currently you can choose between hover triggered, click triggered and always visible.<\/p>\n[\/vc_column_text][nectar_image_with_hotspots image=”3836″ preview=”https:\/\/themenectar.com\/salient\/wp-content\/uploads\/sites\/4\/2021\/05\/brooke-cagle-ZCSc8hoZrtw-unsplash.jpg” color_1=”Extra-Color-1″ hotspot_icon=”plus_sign” tooltip=”click” tooltip_shadow=”large_depth” animation=”true”][nectar_hotspot left=”16.684115019542155%” top=”30.315650736942107%” position=”bottom”]Gorgeous responsive hotspots added from a visual, drag and drop user interface[\/nectar_hotspot][nectar_hotspot left=”45.8786990508096%” top=”57.641551090861654%” position=”top”]You can choose the position of the tooltips very easily[\/nectar_hotspot][nectar_hotspot left=”72.49441652707984%” top=”29.803420776214466%” position=”bottom”]Hotspots can make it easy to explain the details of an image in an exciting way[\/nectar_hotspot][nectar_hotspot left=”30.967336683417084%” top=”76.16023222206611%” position=”top”]These tooltips can be hover triggered, click triggered or set to always display[\/nectar_hotspot][nectar_hotspot left=”82.78196538246789%” top=”70.22777298302658%” position=”top”]Numerical or plus sign, shadow options, animation options. These are very flexible hotspots[\/nectar_hotspot][\/nectar_image_with_hotspots][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bg_color=”#ffffff” scene_position=”center” bottom_padding=”12%” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” gradient_type=”default” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1620683246745{margin-bottom: 10px !important;}”]\n

Non Fullwidth, Numerical Example<\/h3>\n[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” left_padding_desktop=”8%” constrain_group_2=”yes” right_padding_desktop=”8%” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” centered_text=”true” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1488314118532{margin-bottom: 50px !important;}” max_width=”650″]\n

The plus icons can also be changed to a numerical list. You can also change the colors of the hotspots to any of your defined colors in the theme color scheme.<\/p>\n[\/vc_column_text][nectar_image_with_hotspots image=”4797″ preview=”https:\/\/themenectar.com\/salient\/wp-content\/uploads\/sites\/4\/2021\/05\/adomas-aleno-4vrZpOo7fTc-unsplash-scaled.jpg” color_1=”Accent-Color” hotspot_icon=”numerical” tooltip=”hover” tooltip_shadow=”large_depth” animation=”true”][nectar_hotspot left=”13.431571815718158%” top=”19.901382675884506%” position=”bottom”]Gorgeous responsive hotspots added from a visual, drag and drop user interface[\/nectar_hotspot][nectar_hotspot left=”16.82588075880759%” top=”58.9416429442863%” position=”top”]You can choose the position of the tooltips very easily[\/nectar_hotspot][nectar_hotspot left=”48.21138211382114%” top=”45.74013826758845%” position=”bottom”]Hotspots can make it easy to explain the details of an image in an exciting way[\/nectar_hotspot][nectar_hotspot left=”84.29878048780488%” top=”80.71370475803172%” position=”top”]These tooltips can be hover triggered, click triggered or set to always display[\/nectar_hotspot][\/nectar_image_with_hotspots][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row type=”full_width_content” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none”…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":11783,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/pages\/550"}],"collection":[{"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/comments?post=550"}],"version-history":[{"count":2,"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/pages\/550\/revisions"}],"predecessor-version":[{"id":11220,"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/pages\/550\/revisions\/11220"}],"up":[{"embeddable":true,"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/pages\/11783"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/salient\/wp-json\/wp\/v2\/media?parent=550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}