Blue Bird Panels

With duotone hovers.

by Brett Miley

HTML

<a id="automotive" href="#">Automotive</a>
<a id="building" href="#">building</a>
<a id="domestic" href="#">domestic</a>
<a id="engineering" href="#">engineering</a>
<a id="events" href="#">events</a>
<a id="food" href="#">food</a>
<a id="medical" href="#">medical</a>
<a id="professional" href="#">professional</a>



<div class="automotive">Automotive</div>
<div class="building">building</div>
<div class="domestic">domestic</div>
<div class="engineering">engineering</div>
<div class="events">events</div>
<div class="food">food</div>
<div class="medical">medical</div>
<div class="professional">professional</div>

CSS

body {
    text-align:center;
    font-family:sans-serif;
}
.dsm-content-wrap {
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    display: inline-block;
    position: relative;
}
.dsm-content-wrap * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dsm-panel-wrap {
    display: inline-block;
    padding: 8px;
    position: relative;
    text-align: center;
}
.dsm-panel {
    border: 8px solid white;
    box-shadow: 0 0 5px 0 rgba(50, 50, 50, 0.5);
    width: 300px;
    height: 300px;
    display: inline-block;
    text-align: left;
    vertical-align:top;
    transition: all .5s ease-in;
}
#dsm-p1 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-Compliance.gif) no-repeat 67px 0;
}
#dsm-p2 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-HOSupport.gif) no-repeat 67px 0;
}
#dsm-p3 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-Supplier.gif) no-repeat 67px 0;
}
#dsm-p4 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-TSP.gif) no-repeat 67px 0;
}
#dsm-p5 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-PRM.gif) no-repeat 67px 0;
}
#dsm-p6 {
    background:#0091ce url(http://dev2.dsm.pw/wp-content/uploads/2014/09/BlueBirdCare-DocL.gif) no-repeat 67px 0;
}
.dsm-panel:hover {
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.5);
}
.dsm-text {
    display: inline-block;
    padding: 16px;
    padding-bottom: 80px;
    color: #fff;
    font-size: 16px;
    font-weight:bold;
    margin-top: 165px;
    margin-left: 12px;
    width: 190px;
    max-height: 124px;
}
.dsm-text:after {
    content:'';
    position: absolute;
    top: 131px;
    left: 38px;
    width:44px;
    height:50px;
}
#dsm-panel1 {
   ...

JavaScript

//jQuery("#automotive, #building, #domestic, #engineering, #events, #food, #medical, #professional").hide();

  jQuery("#automotive").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery(".building, .domestic, .engineering, .events, .food, .medical, .professional").hide();
      jQuery("#building, #domestic, #engineering, #events, #food, #medical, #professional").removeClass('dsm-active');
      jQuery(".automotive").toggle();
  });


  jQuery("#dsm-button2").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw3, #dsm-ppw4, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button1, #dsm-button3, #dsm-button4, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw2").toggle();
  });

  jQuery("#dsm-button3").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw2, #dsm-ppw4, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button1, #dsm-button2, #dsm-button4, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw3").toggle();
  });

  jQuery("#dsm-button4").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw2, #dsm-ppw3, #dsm-ppw1, #dsm-ppw5, #dsm-ppw6").hide();
      jQuery("#dsm-button2, #dsm-button3, #dsm-button1, #dsm-button5, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw4").toggle();
  });

  jQuery("#dsm-button5").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw2, #dsm-ppw3, #dsm-ppw4, #dsm-ppw6").hide();
      jQuery("#dsm-button1, #dsm-button3, #dsm-button4, #dsm-button2, #dsm-button6").removeClass('dsm-active');
      jQuery("#dsm-ppw5").toggle();
  });
  jQuery("#dsm-button6").click(function () {
      jQuery(this).toggleClass('dsm-active');
      jQuery("#dsm-ppw1, #dsm-ppw2, #dsm-ppw3, #dsm-ppw4, #dsm-ppw5").hide();
      jQuery("#dsm-button1, #dsm-button2, #dsm-button4,...