bubble nodes

Bootstrap snippet. bubble nodes, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: bubble,nodes

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<script src="http://master.bootstraptemplates.net/assets/js/bubble-nodes.js"></script>

<div class="container-fluid">
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
        <h2>Discover more</h2>
        <p>
            Get <a href="#">100+ features</a> out of the box with Vertex’s pricing
        </p>
    </div>

    <div class="hurdles hurdles-normal js-hurdles">
        <div class="hurdles-bubbles">
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node9 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1756.97px, 45px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node11 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2250.25px, 271px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node14 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1601.36px, 155px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node5 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2403.54px, 372px) scale(1);" data-original-title="Akbar Widodo"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node12 hurdles-node hurdles-node" style="opacity: 1; transform: translate(452.386px, 387px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node1 hurdles-node hurdles-node" style="opacity: 1; transform: translate(161.758px, 79px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node8 hurdles-node hurdles-node" style="opacity: 1; transform: translate(291.66px, 314px) scale(1);" data-original-title="Muhammad Simanjuntak"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node0 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1870.68px, 286px) scale(1);" data-original-title="Michael Feldstein"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node10 hurdles-node hurdles-node" style="opacity: 1; transform: translate(-95.3538px, 327px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node2 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1432.11px, 226px) scale(1);" data-original-title="Kate Brown"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node13 hurdles-node hurdles-node" style="opacity: 1; transform: translate(902.158px, 256px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node4 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1324.7px, 20px) scale(1);" data-original-title="Kate Brown"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node7 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1858.31px, 365px) scale(1);" data-original-title="Lars Jolink"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node6 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1041.85px, 183px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node3 hurdles-node hurdles-node" style="opacity: 1; transform: translate(198.378px, 387px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node9 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1953.96px, 183px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node11 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1528.84px, 88px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node14 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1268.25px, 320px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node5 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2750.87px, 258px) scale(1);" data-original-title="Akbar Widodo"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node12 hurdles-node hurdles-node" style="opacity: 1; transform: translate(963.838px, 60px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node1 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2145.68px, 206px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node8 hurdles-node hurdles-node" style="opacity: 1; transform: translate(754.279px, 357px) scale(1);" data-original-title="Muhammad Simanjuntak"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node0 hurdles-node hurdles-node" style="opacity: 1; transform: translate(789.994px, 160px) scale(1);" data-original-title="Michael Feldstein"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node10 hurdles-node hurdles-node" style="opacity: 1; transform: translate(676.625px, 220px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node2 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2561.7px, 313px) scale(1);" data-original-title="Kate Brown"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node13 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2773.38px, 198px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node4 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2655.1px, 148px) scale(1);" data-original-title="Kate Brown"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node7 hurdles-node hurdles-node" style="opacity: 1; transform: translate(-79.6445px, 82px) scale(1);" data-original-title="Lars Jolink"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node6 hurdles-node hurdles-node" style="opacity: 1; transform: translate(287.571px, 182px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node3 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1605.4px, 305px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node9 hurdles-node hurdles-node" style="opacity: 1; transform: translate(423.435px, 60px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node11 hurdles-node hurdles-node" style="opacity: 1; transform: translate(440.766px, 118px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node14 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2164.77px, 118px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node5 hurdles-node hurdles-node" style="opacity: 1; transform: translate(-69.7384px, 148px) scale(1);" data-original-title="Akbar Widodo"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node12 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1724.41px, 233px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node1 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1897.69px, 97px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node8 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2407.18px, 148px) scale(1);" data-original-title="Muhammad Simanjuntak"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node0 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2125.04px, 30px) scale(1);" data-original-title="Michael Feldstein"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node10 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2723.6px, 385px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node2 hurdles-node hurdles-node" style="opacity: 1; transform: translate(233.042px, 8px) scale(1);" data-original-title="Kate Brown"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node13 hurdles-node hurdles-node" style="opacity: 1; transform: translate(51.6714px, 244px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node4 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2543.23px, 20px) scale(1);" data-original-title="Kate Brown"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node7 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1548.09px, 385px) scale(1);" data-original-title="Lars Jolink"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node6 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2456.31px, 206px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node3 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1271.09px, 111px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node9 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2345.16px, 70px) scale(1);" data-original-title="Somchai Chomsombat"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node11 hurdles-node hurdles-node" style="opacity: 1; transform: translate(726.987px, 103px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node14 hurdles-node hurdles-node" style="opacity: 1; transform: translate(-172.986px, 20px) scale(1);" data-original-title="William Richardson"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node5 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1071.94px, 367px) scale(1);" data-original-title="Akbar Widodo"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node12 hurdles-node hurdles-node" style="opacity: 1; transform: translate(1157.02px, 256px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node1 hurdles-node hurdles-node" style="opacity: 1; transform: translate(543.353px, 271px) scale(1);" data-original-title="John Doe"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
            <div data-trigger="hover" data-toggle="popover" data-placement="top" title="" data-content="Web Developer" class="hurdles-node hurdles-node8 hurdles-node hurdles-node" style="opacity: 1; transform: translate(2623.33px, 75px) scale(1);" data-original-title="Muhammad Simanjuntak"><img class="hurdles-image" src="https://bootdey.com/img/Content/avatar/avatar1.png"></div>
        </div>
    </div>
    <script type="application/json" id="site-about-config">
        { "bubbleNodes":[ {"title":"Michael Feldstein", "job": "Web Developer", "type":"blue", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"John Doe","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Kate Brown","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Somchai Chomsombat","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Kate Brown","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Akbar Widodo","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"William Richardson","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Lars Jolink","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Muhammad Simanjuntak","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"Somchai Chomsombat","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"William Richardson","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"William Richardson","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"John Doe","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"William Richardson","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"}, {"title":"William Richardson","type":"blue", "job": "Web Developer", "src":"https://bootdey.com/img/Content/avatar/avatar1.png"} ]}
    </script>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}
/*------------------------------------
  Hurdles - Team slide
------------------------------------*/
.hurdles { margin-top: 40px; min-height: 450px; position: relative; overflow: hidden }

@media(min-width: 880px) {
    .hurdles { margin-top: 80px }
}

.hurdles-stakeholder { width: 90px; height: 90px; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: calc(50% - 45px); left: calc(50% - 45px) }

@media(min-width: 670px) {
    .hurdles-stakeholder { width: 120px; height: 120px; top: calc(50% - 60px); left: calc(50% - 60px) }
}

.hurdles-stakeholder-label { width: auto; display: block; color: currentColor; position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%,100%) translateY(5px); transform: translate(-50%,100%) translateY(5px); text-transform: uppercase; font: 600 19px Camphor; letter-spacing: .025em; padding: 3px 10px; opacity: 0; -webkit-transition: all .4s ease-out; transition: all .4s ease-out }
.hurdles-stakeholder--merchant { background-color: #c5f0fe; color: #4bb3e6; z-index: 2 }
.hurdles-stakeholder--merchant svg { width: 100%; height: 100% }
.hurdles-stakeholder--merchant.moved .hurdles-stakeholder-label { opacity: 1; -webkit-transform: translate(-50%,100%) translateY(15px); transform: translate(-50%,100%) translateY(15px) }

@-webkit-keyframes move-arrows {
    to { -webkit-mask-position: 11px 0; mask-position: 11px 0 }
}

@keyframes move-arrows {
    to { -webkit-mask-position: 11px 0; mask-position: 11px 0 }
}

@-webkit-keyframes move-gradient {
    0% { background-position-x: 0 }
    to { background-position-x: 100% }
}

@keyframes move-gradient {
    0% { background-position-x: 0 }
    to { background-position-x: 100% }
}


.hurdles-stakeholder-glow {
    content: "";
    width: 250px;
    height: 250px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iMjUwIiB2aWV3Qm94PSIwIDAgMjUwIDI1MCI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJidXNpbmVzcy1zaGFkb3ctdjEtYSIgZng9IjUwJSIgZnk9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0ZGRiIvPjxzdG9wIG9mZnNldD0iNDEuMzQxJSIgc3RvcC1jb2xvcj0iI0ZGRiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PGNpcmNsZSBjeD0iMTI1IiBjeT0iMTI1IiByPSIxMjUiIGZpbGw9InVybCgjYnVzaW5lc3Mtc2hhZG93LXYxLWEpIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii43NSIvPjwvc3ZnPg==);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    position: absolute;
    z-index: -1;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}
.hurdles-stakeholder.mask-out .hurdles-stakeholder-glow { opacity: 0 }
.hurdles-stakeholder-arrows { position: absolute; height: 40px; width: 25px; will-change: opacity; left: calc(100% + 12px); opacity: 0; -webkit-transform: scale(.5); transform: scale(.5); z-index: -1 }

@media only screen and (min-width: 600px) {
    .hurdles-stakeholder-arrows { left: calc(100% + 40px); left: calc(100% + 25px); width: 90px; width: 130px; -webkit-transform: none; transform: none }
}

.hurdles-stakeholder-arrows .arrow { width: 40px; height: 18px; position: absolute; top: calc(50% - 9px); left: calc(50% - 20px); opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
.hurdles-stakeholder-arrows .arrow svg { width: auto; height: 100%; display: block }
.hurdles-stakeholder-arrows .arrow:first-child { top: calc(50% - 19px); top: calc(50% - 9px - 10px) }
.hurdles-stakeholder-arrows .arrow:last-child { top: calc(50% + 1px); top: calc(50% - 9px + 10px) }
.hurdles-stakeholder-arrows .arrow:last-child svg { -webkit-transform: scaleX(-1); transform: scaleX(-1) }
.hurdles-stakeholder--merchant.animating .hurdles-stakeholder-arrows { opacity: 1 }
.hurdles-stakeholder--stripe { background-color: #6875e2; -webkit-transform: scale(.75); transform: scale(.75); opacity: 0; z-index: 2 }
.hurdles-stakeholder--stripe > svg { fill: #fff }

@media(min-width: 880px) {
    .hurdles-stakeholder--stripe > svg { -webkit-transform: scale(1.2); transform: scale(1.2) }
}

.hurdles-bubbles { position: absolute; left: 0; top: 0; width: 100%; height: 100% }
.hurdles-node { position: absolute; font-size: 14px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 9999px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 30px }

@media(min-width: 880px) {
    .hurdles-node { font-size: 16px; height: 40px }
}

.hurdles-node--blue { background-color: #c4f0ff; color: #217ab7 }
.hurdles-node--pink { background-color: #ffe0f5; color: #9251ac }
.hurdles-node--yellow { background-color: #fdeebe; color: #c85d42 }
.hurdles-node--green { background-color: #d6facf; color: #159570 }
.hurdles-mask { width: 50%; height: 500px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: #fff; opacity: 0; pointer-events: none }

.hurdles-mask:after {
    content: "";
    position: absolute;
    width: 250px;
    height: 91%;
    right: 0;
    top: 50%;
    -webkit-transform: translateX(100%) translateY(-50%);
    transform: translateX(100%) translateY(-50%);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDI1MCA1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIwJSIgeTE9IjUwJSIgeDI9Ijk3LjUyNiUiIHkyPSI1MCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj48c3RvcCBzdG9wLWNvbG9yPSIjQzRGMEZGIiBzdG9wLW9wYWNpdHk9Ii41IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBpZD0iTWFzayIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMjUwIDBDMTExLjkyOSAwIDEgMTExLjkyOSAxIDI1MHMxMTAuOTI5IDI1MCAyNDkgMjUwSDBWMGgyNTB6IiBpZD0iQ29tYmluZWQtU2hhcGUiIGZpbGw9IiNGRkYiLz48cGF0aCBkPSJNMjUxIDUwMFYwQzExMi45MjkgMCAxIDExMS45MjkgMSAyNTBzMTExLjkyOSAyNTAgMjUwIDI1MHoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0idXJsKCNsaW5lYXJHcmFkaWVudC0xKSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOm11bHRpcGx5Ii8+PC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: auto 100%
}

.hurdles-image { width: 90px; border-radius: 50%; }

                                    

About this snippet

Creator: Dey Dey

Bootstrap version: 4.3.1

Created: Apr 25th, 16:52

Views: 5