Flip Blocks

  • 1
    Keep up-to-date with the latest innovations in the industry
  • 2
    Get inspired in the 60+ conference sessions
  • 3
    Source products and services from more than 250 suppliers
  • 4
    Hear about the latest topics from industry leaders in the panel sessions
  • 5
    Network with your peers and share best practice
  • Top 10 Reasons
    you should attend the 2016 Business Travel Show

  • 6
    Find new suppliers offering innovative solutions for your specific requirements
  • 7
    Meet existing suppliers and enhance relationships
  • 8
    Improve your company’s competitiveness and benchmark your product
  • 9
    Benefit from one efficient visit for all your sourcing, learning and networking needs
  • 10
    Make a difference to your company’s bottom line

Files needed:

  • Grip Flip CSS - https://cent.blob.core.windows.net/assets/global/plugins/grid-flip/grid-flip.css

Code:

HTML

<div class="grid-flip">
<ul class="grid">
<li class="item">
    <div class="flipper">
        <div class="front">
            <div>1</div>
        </div>
        <div class="back">
            <div>Network with your peers and share best practice</div>
        </div>
    </div>
</li>
<li class="no-flip">
    <div class="non-flip-content">
        <h2>Top 10 Reasons<br />
        <small>you should attend the 2016 Business Travel Show</small></h2>
    </div>
</li>
</ul>
</div>

JS

jQuery('.grid-flip .item').hover(
    function(){ $(this).addClass('flip') }
);
jQuery('.grid-flip .item').click(
    function(){ $(this).addClass('flip') }
);