flip

Hover Effect

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More 

<div class="card effect__hover">
  <div class="card__front bg-theme-colored">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>.........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="card effect__hover">
  <div class="card__front bg-black" >
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>......</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="card effect__hover">
  <div class="card__front" data-bg-color="#dedede">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Click Effect

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More 

<div class="card effect__click">
  <div class="card__front bg-theme-colored">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="card effect__click">
  <div class="card__front bg-black">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="card effect__click">
  <div class="card__front" data-bg-color="#dedede">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Random Effect

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More

Title Here

Title Here

Sed gravida, ligula eget aliquam elementum, justo nisl mattis neque, in molestie ipsum dolor eu justo. Duis nec aliquam nulla. Sed interdum orci non mi porttitor, a dapibus ante varius.

Read More 

<div class="card effect__random" data-id="1">
  <div class="card__front bg-theme-colored">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>..........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="card effect__random" data-id="2">
  <div class="card__front bg-black">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="text-white pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase text-white">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>...........</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="card effect__random" data-id="3">
  <div class="card__front" data-bg-color="#dedede">
    <div class="card__text">
      <div class="display-table-parent">
        <div class="display-table">
          <div class="display-table-cell">
            <div class="icon-box mb-0"> <a href="#" class="icon mb-0"> <i class="pe-7s-users font-72"></i> </a>
              <h3 class="icon-box-title text-uppercase">Title Here</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="card__back" data-bg-color="#e0e0e0">
    <div class="card__text">
      <div class="display-table-parent p-30">
        <div class="display-table">
          <div class="display-table-cell">
            <h4 class="text-uppercase">Title Here</h4>
            <p>............</p>
            <a href="#" class="btn btn-default mt-10"> Read More </a> 
          </div>
        </div>
      </div>
    </div>
  </div>
</div>