Circle tab function with image hover state.html

<section class="our-strategy-section">
    <img src="images/about-page-image.jpg" alt="">
    <div class="strategy-inner common-wrap clear" id="our-strategy">
        <h6>The Right strategy</h6>
        <h2>Our business model is underpinned by 6 strategic pillars</h2>

        <div id="circle-tab-section" class="circle-tab-section clear">
            <img class="maping-images" name="tabs-map" src="images/blank.gif" id="Roundcirclemaping" usemap="#tabs-map" alt="" />
            <map name="tabs-map" id="tabs-map">
                <area shape="poly" coords="269,169,201,54,323,7,440,2,598,54,531,169,440,137,345,137,269,169" href="javascript:;" alt="focus">
                <area shape="poly" coords="133,399,2,399,21,274,89,152,197,57,263,171,191,233,149,310,133,399" href="javascript:;" alt="controls">
                <area shape="poly" coords="197,743,83,642,24,536,-1,405,133,402,152,503,200,576,261,629,197,743" href="javascript:;" alt="brand">
                <area shape="poly" coords="597,747,475,791,363,798,273,779,205,747,270,633,363,665,455,661,530,633,597,747" href="javascript:;" alt="people">
                <area shape="poly" coords="799,401,788,496,758,576,706,656,602,743,537,631,620,551,654,481,667,404,799,401" href="javascript:;" alt="clients">
                <area shape="poly" coords="603,58,535,173,600,224,646,299,667,398,800,398,790,313,750,210,681,118,603,58" href="javascript:;" alt="properties">
            </map>
            <div id="tabs-states" class="tabs-states">
                <img src="images/strategy-focus.png" alt="">
                <img src="images/strategy-culture.png" alt="">
                <img src="images/strategy-brand.png" alt="">
                <img src="images/strategy-people.png" alt="">
                <img src="images/strategy-clients.png" alt="">
                <img src="images/strategy-properties.png" alt="">
            </div>
            <div id="hover-states" class="tabs-states">
                <img src="images/Hover-round-circle-focus.png" alt="">
                <img src="images/Hover-round-circle-controls.png" alt="">
                <img src="images/Hover-round-circle-brand.png" alt="">
                <img src="images/Hover-round-circle-people.png" alt="">
                <img src="images/Hover-round-circle-client.png" alt="">
                <img src="images/Hover-round-circle-properties.png" alt="">
            </div>
            <ul id="mobi-tabs" class="mobi-tabs">
                <li>
                    <span>The Right Focus</span>
                    <p>InoSpace has a simple business model and a focused strategy. We invest in multi-building, multi-tenant office and industrial properties typically measuring 5,000 – 30,000 sqm. We are not a developer but a transformer of properties that offers attractive, low-risk, income-led returns and capital growth in all market conditions.</p>
                </li>
                <li>
                    <span>The Right Properties</span>
                    <p>We identify, transform and assets and integrate them into our network of sites under the Inospace brand. Through repositioning projects we create modernised, higher quality, well designed spaces that offer value adding facilities. We constantly upgrade our existing properties through adapting to client requirements and evolving trends.</p>
                </li>
                <li>
                    <span>The Right Clients</span>
                    <p>We regard those who occupy our spaces as our clients and we continually build our understanding of their needs. We target the right clients for the right properties and build long term relationships by offering unique lease products and foster long term relationships through community development, networking, inter-trading and communication. </p>
                </li>
                <li>
                    <span>The Right People</span>
                    <p>We invest in human talent to deliver our strategy of a scalable business that is underpinned by operational excellence. We employ quality people with skills reflecting all aspects of real estate ownership including asset management, redevelopment, investment, marketing and financing. Skilled expertise, market knowledge, aligned goals and a dynamic innovative culture allows us to build a robust sustainable business.</p>
                </li>
                <li>
                    <span>The Right Brand</span>
                    <p>We are focused on building a client-centric brand that encourages long-term advocacy, builds financial value and drives income. It is key for InoSpace to highlight our differentiated offerings and to have a stand-out brand that creates barriers to entry and allows us to expand into new geographic markets. </p>
                </li>
                <li>
                    <span>The Right Controls</span>
                    <p>Our entrepreneurial flair is strengthened by rigorous corporate governance. Our prudent risk management approach, tight financial controls and sound corporate structure underpins our business. Real estate is capital intensive and we consider all possible outcomes at a project, asset and corporate level.</p>
                </li>
            </ul>
            <div id="tab-contents-container" class="tab-contents-container">
                <div class="tab-contents">
                    <div class="tab-head">FOCUS</div>
                    <p>InoSpace has a simple business model and a focused strategy. We invest in multi-building, multi-tenant office and industrial properties typically measuring 5,000 – 30,000 sqm. We are not a developer but a transformer of properties that offers attractive, low-risk, income-led returns and capital growth in all market conditions.</p>
                </div>
                <div class="tab-contents">
                    <div class="tab-head">Culture</div>
                    <p>Our entrepreneurial flair is strengthened by rigorous corporate governance. Our prudent risk management approach, tight financial controls and sound corporate structure underpins our business. Real estate is capital intensive and we consider all possible outcomes at a project, asset and corporate level.</p>
                </div>
                <div class="tab-contents">
                    <div class="tab-head">Brand</div>
                    <p>We are focused on building a client-centric brand that encourages long-term advocacy, builds financial value and drives income. It is key for InoSpace to highlight our differentiated offerings and to have a stand-out brand that creates barriers to entry and allows us to expand into new geographic markets. </p>
                </div>
                <div class="tab-contents">
                    <div class="tab-head">People</div>
                    <p>We invest in human talent to deliver our strategy of a scalable business that is underpinned by operational excellence. We employ quality people with skills reflecting all aspects of real estate ownership including asset management, redevelopment, investment, marketing and financing. Skilled expertise, market knowledge, aligned goals and a dynamic innovative culture allows us to build a robust sustainable business.</p>
                </div>
                <div class="tab-contents">
                    <div class="tab-head">Clients</div>
                    <p>We regard those who occupy our spaces as our clients and we continually build our understanding of their needs. We target the right clients for the right properties and build long term relationships by offering unique lease products and foster long term relationships through community development, networking, inter-trading and communication. </p>
                </div>
                <div class="tab-contents">
                    <div class="tab-head">Properties</div>
                    <p>We identify, transform and assets and integrate them into our network of sites under the Inospace brand. Through repositioning projects we create modernised, higher quality, well designed spaces that offer value adding facilities. We constantly upgrade our existing properties through adapting to client requirements and evolving trends.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<style>

  .our-strategy-section{margin-top:79px;}
  .our-strategy-section img{width: 100%;}
  .strategy-inner{padding:69px 15px 0; max-width: 880px;}
  .strategy-tabs-warp{float: left; width: 100%;}
  .strategy-tabs-warp li{float: left; width: 395px; height: 168px; background: #f4f4f6; position: relative; display: inline-block; vertical-align: middle; text-align: center;}
  .our-strategy-section h2{line-height: 66px}
  .circle-tab-section{position: relative; max-width: 800px; margin:75px auto 0; clear: both;}
  .maping-images{position: absolute; left: 0; top: 0; width: 100%; z-index: 10;}
  .tabs-states{position: relative; float: left; width: 100%; z-index: 2;}
  .tabs-states img{width: 100%;}
  .tab-contents-container{position: absolute; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -webkit-box-pack: justify; -moz-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; align-items: center;}
  .tab-contents{width: 100%; max-width: 320px; margin: 0 auto; clear: both; text-align: center; padding: 0 10px; margin-bottom: -25px;}

</style>

<script>
  $(function(){
    
        $('#tabs-states > img').hide()
        $('#tabs-states > img').eq(0).show()
        $('#tab-contents-container > div.tab-contents').hide()
        $('#tab-contents-container > div.tab-contents').eq(0).show()
        $('#tabs-map > area').each(function(i){
            
            $(this).click(function(e){
                e.preventDefault()
                $('#tabs-states > img').hide()
                $('#tabs-states > img').eq(i).show()
                $('#tab-contents-container > div.tab-contents').hide()
                $('#tab-contents-container > div.tab-contents').eq(i).show()
                
            })

           if( $(window).width() > 1024 ){
                $(this).mouseenter(function(e){
                    $('#hover-states > img').hide()
                    $('#hover-states > img').eq(i).show()
                })

                $(this).mouseleave(function(){
                   $('#hover-states > img').hide()
                })
           }
            
        })
        
  })
</script>