Hover Info Boxes

<div class="row">
  <div class="col-md-4 col-sm-6">
    <div class="dg-hover-info-box01">
      <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-cog2"></i></span>
        <h3 class="title">ADVANCED SETTINGS</h3>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="dg-hover-info-box01">
      <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-rocket2"></i></span>
        <h3 class="title">SMART & EFFECTIVE</h3>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="dg-hover-info-box01">
      <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-lamp"></i></span>
        <h3 class="title">IMAGINE AND CREATE</h3>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
      </div>
    </div>
  </div>
</div>

<ul class="dg-hover-info-box02">
  <li>
    <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-palette"></i></span>
      <h3 class="title">ELEGANT DESIGN</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
  </li>
  <li>
    <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-binoculars2"></i></span>
      <h3 class="title">GREAT FLEXIBILITY</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
  </li>
  <li>
    <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-cog2"></i></span>
      <h3 class="title">EASY OPERATION</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
  </li>
  <li>
    <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-pencil-ruler"></i></span>
      <h3 class="title">RICHER INTERFACE</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
  </li>
</ul>

<div class="row">
  <div class="col-md-4 col-sm-6">
    <div class="dg-hover-info-box03 bg-color-1">
      <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-cog2"></i></span>
        <h3 class="title">ADVANCED SETTINGS</h3>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="dg-hover-info-box03 bg-color-2">
      <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-rocket2"></i></span>
        <h3 class="title">SMART & EFFECTIVE</h3>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-sm-6">
    <div class="dg-hover-info-box03 bg-color-3">
      <div class="cont"><span class="dg-ico-max size-sm icon"><i class="fa fa-lamp"></i></span>
        <h3 class="title">IMAGINE AND CREATE</h3>
        <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</p>
      </div>
    </div>
  </div>
</div>

<ul class="dg-hover-info-box04">
  <li>
    <div class="cont"><span class="dg-ico-max size-xs icon color-accent"><i class="fa fa-palette"></i></span>
      <h3 class="title border-accent">ELEGANT DESIGN</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
    <div class="bg bg-accent"> </div>
  </li>
  <li>
    <div class="cont"><span class="dg-ico-max size-xs icon color-warning"><i class="fa fa-binoculars2"></i></span>
      <h3 class="title border-warning">GREAT FLEXIBILITY</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
    <div class="bg bg-warning"> </div>
  </li>
  <li>
    <div class="cont"><span class="dg-ico-max size-xs icon color-success"><i class="fa fa-cog2"></i></span>
      <h3 class="title border-success">EASY OPERATION</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
    <div class="bg bg-success"> </div>
  </li>
  <li>
    <div class="cont"><span class="dg-ico-max size-xs icon color-accent2"><i class="fa fa-pencil-ruler"></i></span>
      <h3 class="title border-accent2">RICHER INTERFACE</h3>
      <div class="description">Cras dapibus arcu a neque laoreet condimentum. In in rhoncus leo. Sed mattis feugiat odio, sit amet.</div>
    </div>
    <div class="bg bg-accent2"> </div>
  </li>
</ul>

<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-user2"></i></span>
            <h3 class="title">USER FRIENDLY</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">USER FRIENDLY</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-cloud-gear"></i></span>
            <h3 class="title">LAYOUT OPTIONS</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">LAYOUT OPTIONS</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-rain"></i></span>
            <h3 class="title">FLUID ANIMATION</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">FLUID ANIMATION</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-lifebuoy"></i></span>
            <h3 class="title">UNLIMITED COLORS</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">UNLIMITED COLORS</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-diamond3"></i></span>
            <h3 class="title">STANDARD DEMOS</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">STANDARD DEMOS</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-chart-growth"></i></span>
            <h3 class="title">NETWORK</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">NETWORK</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-icons2"></i></span>
            <h3 class="title">VERSATILE MODULE</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">VERSATILE MODULE</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-3 col-sm-6">
    <div class="flip-box dg-hover-info-box05">
      <div class="rotate">
        <div class="front">
          <div class="center"><span class="dg-ico-max size-xs icon"><i class="fa fa-site-map"></i></span>
            <h3 class="title">5 STAR SUPPORT</h3>
          </div>
        </div>
        <div class="back">
          <h3 class="title">5 STAR SUPPORT</h3>
          <p>Ut cursus massa at urnaaculis estie. Sed aliquamellus vitae ultrs cond.</p>
          <p class="pt-10"><a href="#" title="Learn More">LEARN MORE <span class="fa fa-chevron-right2"></span></a></p>
        </div>
      </div>
    </div>
  </div>
</div>