{"id":1386,"date":"2017-02-13T15:05:23","date_gmt":"2017-02-13T15:05:23","guid":{"rendered":"http:\/\/test.kriesi.at\/enfold-2017\/?page_id=1386"},"modified":"2017-02-13T15:05:23","modified_gmt":"2017-02-13T15:05:23","slug":"image-with-hotspots","status":"publish","type":"page","link":"https:\/\/www.younglives.in\/home\/elements\/image-with-hotspots\/","title":{"rendered":"Image with Hotspots"},"content":{"rendered":"<div id='intro'  class='avia-section av-av_section-2c67d3a703e345bf0cee56e9c22b277f main_color avia-section-default avia-no-border-styling  avia-builder-el-0  el_before_av_one_full  avia-builder-el-first  avia-bg-style-scroll container_wrap sidebar_right'  ><div class='container av-section-cont-open' ><main  role=\"main\" itemprop=\"mainContentOfPage\"  class='template-page content  av-content-small alpha units'><div class='post-entry post-entry-type-page post-entry-1386'><div class='entry-content-wrapper clearfix'>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_hr-41aaea9d9b6edc76b83c3ebce474835d\">\n#top .hr.hr-invisible.av-av_hr-41aaea9d9b6edc76b83c3ebce474835d{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-av_hr-41aaea9d9b6edc76b83c3ebce474835d hr-invisible  avia-builder-el-1  el_before_av_heading  avia-builder-el-first '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-88da510e5832c6d5e5372bd9d1307c40\">\n#top .av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40{\npadding-bottom:20px;\ncolor:#000000;\nfont-size:40px;\n}\nbody .av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n#top #wrap_all .av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40 .av-special-heading-tag{\nfont-size:40px;\n}\n.av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40 .special-heading-inner-border{\nborder-color:#000000;\n}\n.av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40 .av-subheading{\nfont-size:15px;\n}\n\n@media only screen and (min-width: 480px) and (max-width: 767px){ \n#top #wrap_all .av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40 .av-special-heading-tag{\nfont-size:0.8em;\n}\n}\n\n@media only screen and (max-width: 479px){ \n#top #wrap_all .av-special-heading.av-av_heading-88da510e5832c6d5e5372bd9d1307c40 .av-special-heading-tag{\nfont-size:0.8em;\n}\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-88da510e5832c6d5e5372bd9d1307c40 av-special-heading-h1 custom-color-heading blockquote modern-quote modern-centered  avia-builder-el-2  el_after_av_hr  el_before_av_hr  av-inherit-size'><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Image with Hotspots<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_hr-90ab8665481416921441e69d3f748115\">\n#top .hr.av-av_hr-90ab8665481416921441e69d3f748115{\nmargin-top:30px;\nmargin-bottom:30px;\n}\n.hr.av-av_hr-90ab8665481416921441e69d3f748115 .hr-inner{\nwidth:50px;\nborder-color:#000000;\n}\n<\/style>\n<div  class='hr av-av_hr-90ab8665481416921441e69d3f748115 hr-custom  avia-builder-el-3  el_after_av_heading  el_before_av_image_hotspot  avia-builder-el-last  hr-center hr-icon-no'><span class='hr-inner inner-border-av-border-fat'><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-av_image_hotspot-67a8a5c7844d0558d93fab30378467e2\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-324478215aa3dd98807220c3e5a06159{\ntop:13.7%;\nleft:27.8%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-852fb5e4e45eb9dc410193d3ffe5f02a{\ntop:21%;\nleft:69.9%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-891413f289dca7e425248b702ae1dd6a{\ntop:48.6%;\nleft:85.3%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-749d12c412832aaf8873dcac97bc2285{\ntop:87.1%;\nleft:40.1%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-6e66f9e3c44a7309d5985e471edd35f9{\ntop:63.2%;\nleft:11.3%;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-67a8a5c7844d0558d93fab30378467e2  avia-builder-el-4  el_after_av_hr  el_before_av_hr  av-hotspot-numbered av-permanent-tooltip avia_animated_image avia_animate_when_almost_visible bottom-to-top av-mobile-fallback-active  av-non-fullwidth-hotspot-image'  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\" ><div class='av-hotspot-container'><div class='av-hotspot-container-inner-cell'><div class='av-hotspot-container-inner-wrap'><div class='av-image-hotspot av-av_image_spot-324478215aa3dd98807220c3e5a06159 av-image-hotspot-1 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Beautiful new demos with each release&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>1<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-852fb5e4e45eb9dc410193d3ffe5f02a av-image-hotspot-2 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Free Stock Pictures included in all demos&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>2<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-891413f289dca7e425248b702ae1dd6a av-image-hotspot-3 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Retina ready and responsive &#8211; works great on devices of any\u00a0size&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>3<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-749d12c412832aaf8873dcac97bc2285 av-image-hotspot-4 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Amazing Theme Options for unlimited colors and styles&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>4<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-6e66f9e3c44a7309d5985e471edd35f9 av-image-hotspot-5 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Powerful\u00a0Visual Layout Editor&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>5<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-376 avia-img-lazy-loading-not-376 avia_image' src=\"https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1.jpg\" alt='' title=''  height=\"775\" width=\"1500\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1.jpg 1500w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1-300x155.jpg 300w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1-768x397.jpg 768w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1-1030x532.jpg 1030w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1-705x364.jpg 705w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2015\/07\/multi_apple-1-450x233.jpg 450w\" sizes=\"(max-width: 1500px) 100vw, 1500px\" \/><\/div><\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-1 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">1<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>Beautiful new demos with each release<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-2 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">2<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>Free Stock Pictures included in all demos<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-3 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">3<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>Retina ready and responsive &#8211; works great on devices of any\u00a0size<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-4 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">4<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>Amazing Theme Options for unlimited colors and styles<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-5 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">5<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>Powerful\u00a0Visual Layout Editor<\/p>\n<\/div><\/div><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_hr-80a1598b9be940801ac706df450bd277\">\n#top .hr.hr-invisible.av-av_hr-80a1598b9be940801ac706df450bd277{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-av_hr-80a1598b9be940801ac706df450bd277 hr-invisible  avia-builder-el-5  el_after_av_image_hotspot  el_before_av_one_half  avia-builder-el-first '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_half-48fa403461522c90ad195d35fed0c7d4\">\n.flex_column.av-av_one_half-48fa403461522c90ad195d35fed0c7d4{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_half-48fa403461522c90ad195d35fed0c7d4 av_one_half  avia-builder-el-6  el_after_av_hr  el_before_av_one_half  first flex_column_div av-animated-generic fade-in av-zero-column-padding  '     ><section  class='av_textblock_section av-av_textblock-758c27939cf32cac4cce0d557d1c3104 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Image with Hotspots allows you to place either a fullwidth or content size image on the screen that has various hotspots (any number possible) which will be shown once the image scrolls into the browser vieport<\/p>\n<\/div><\/section><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_half-30345572d6c06d9cfd42ea37ace6bad0\">\n.flex_column.av-av_one_half-30345572d6c06d9cfd42ea37ace6bad0{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_half-30345572d6c06d9cfd42ea37ace6bad0 av_one_half  avia-builder-el-8  el_after_av_one_half  avia-builder-el-last  flex_column_div av-animated-generic fade-in av-zero-column-padding  '     ><section  class='av_textblock_section av-av_textblock-758c27939cf32cac4cce0d557d1c3104 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There are &#8211; as always &#8211; several color options, as well as options for each individual hotspot. For example how and when the text overlay should be shown.<\/p>\n<\/div><\/section><\/div>\n<\/div><\/div><\/main><!-- close content main element --><\/div><\/div><div id='after_section_1'  class='main_color av_default_container_wrap container_wrap sidebar_right'  ><div class='container av-section-cont-open' ><div class='template-page content  av-content-small alpha units'><div class='post-entry post-entry-type-page post-entry-1386'><div class='entry-content-wrapper clearfix'>\n<div class='flex_column_table av-av_one_full-169e5a607a277699ae4d12b1f6626805 sc-av_one_full av-equal-height-column-flextable'>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_one_full-169e5a607a277699ae4d12b1f6626805\">\n.flex_column.av-av_one_full-169e5a607a277699ae4d12b1f6626805{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-av_one_full-169e5a607a277699ae4d12b1f6626805 av_one_full  avia-builder-el-10  el_after_av_section  avia-builder-el-no-sibling  first flex_column_table_cell av-equal-height-column av-align-middle av-zero-column-padding  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-sub-av-av_image_hotspot-6936779f47d95ca2b173cf6cfd114a74\">\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-cd3a6fc377e0a063168aef08e3b82979{\ntop:18.8%;\nleft:62.5%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-cd3a6fc377e0a063168aef08e3b82979 .av-image-hotspot_inner{\nbackground-color:#22689e;\ncolor:#ffffff;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-cd3a6fc377e0a063168aef08e3b82979 .av-image-hotspot-pulse{\nbackground-color:#22689e;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-0d6a47f927090f87fdbb33a288973f64{\ntop:70.6%;\nleft:33.1%;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-0d6a47f927090f87fdbb33a288973f64 .av-image-hotspot_inner{\nbackground-color:#22689e;\ncolor:#ffffff;\n}\n.av-hotspot-image-container .av-image-hotspot.av-av_image_spot-0d6a47f927090f87fdbb33a288973f64 .av-image-hotspot-pulse{\nbackground-color:#22689e;\n}\n<\/style>\n<div  class='av-hotspot-image-container av-av_image_hotspot-6936779f47d95ca2b173cf6cfd114a74  avia-builder-el-11  el_before_av_textblock  avia-builder-el-first  av-hotspot-numbered av-permanent-tooltip avia_animated_image avia_animate_when_almost_visible fade-in av-mobile-fallback-active  av-non-fullwidth-hotspot-image'  itemprop=\"image\" itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/ImageObject\" ><div class='av-hotspot-container'><div class='av-hotspot-container-inner-cell'><div class='av-hotspot-container-inner-wrap'><div class='av-image-hotspot av-av_image_spot-cd3a6fc377e0a063168aef08e3b82979 av-image-hotspot-1 av-permanent-tooltip' data-avia-tooltip-position='top' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-above av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Tons of elements to build your site&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>1<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><div class='av-image-hotspot av-av_image_spot-0d6a47f927090f87fdbb33a288973f64 av-image-hotspot-2 av-permanent-tooltip' data-avia-tooltip-position='right' data-avia-tooltip-alignment='centered' data-avia-tooltip-class='av-tt-large-width av-tt-pos-right av-tt-align-centered  av-mobile-fallback-active  av-permanent-tooltip-single  main_color av-tooltip-shadow av-tt-hotspot' data-avia-tooltip='&lt;p&gt;Canvas preview to build your layout&lt;\/p&gt;\n'><div class='av-image-hotspot_inner'>2<\/div><div class='av-image-hotspot-pulse'><\/div><\/div><img decoding=\"async\" fetchpriority=\"high\" class='wp-image-787 avia-img-lazy-loading-not-787 avia_image' src=\"https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1.jpg\" alt='' title=''  height=\"1400\" width=\"1400\"  itemprop=\"thumbnailUrl\" srcset=\"https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1.jpg 1400w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-80x80.jpg 80w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-300x300.jpg 300w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-768x768.jpg 768w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-1030x1030.jpg 1030w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-36x36.jpg 36w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-180x180.jpg 180w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-705x705.jpg 705w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-120x120.jpg 120w, https:\/\/www.younglives.in\/home\/wp-content\/uploads\/2017\/02\/features-builder-1-450x450.jpg 450w\" sizes=\"(max-width: 1400px) 100vw, 1400px\" \/><\/div><\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-1 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">1<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nTons of elements to build your site<\/p>\n<\/div><\/div><div class='av-hotspot-fallback-tooltip av-image-hotspot-2 av-permanent-tooltip'><div class=\"av-hotspot-fallback-tooltip-count\">2<div class=\"avia-arrow\"><\/div><\/div><div class=\"av-hotspot-fallback-tooltip-inner clearfix\"><p>\nCanvas preview to build your layout<\/p>\n<\/div><\/div><\/div><br \/>\n<section  class='av_textblock_section av-av_textblock-758c27939cf32cac4cce0d557d1c3104 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/CreativeWork\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Here you can see an example of a non-fulwidth image with hotspots. Also on this image with have set a different color for the hotspot. You can assign colors individually for each hotspot.<\/p>\n<\/div><\/section><\/p><\/div><\/div><!--close column table wrapper. Autoclose: 1 -->\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":606,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1386","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/pages\/1386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/comments?post=1386"}],"version-history":[{"count":0,"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/pages\/1386\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/pages\/606"}],"wp:attachment":[{"href":"https:\/\/www.younglives.in\/home\/wp-json\/wp\/v2\/media?parent=1386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}