Each flipbox element has two faces which are switched when the user hover on the element.

This is how the filpbox element markup looks like:

<div class="dm__flipboxEl dm__text--center"> 
  <div class="dm__flipbox dm__flipbox-front" style="background-image: url('images/work_thumb_02.jpg')"> <!-- Change frontside image -->
    <div class="dm__flipbox-content dm__flipbox-content--front"> 
      <div class="row"></div> <!-- Change frontside text-->
    </div>
    <div class="dm__flipbox-overlay dm__flipbox-overlayFront"></div>
  </div> <!--/.dm__flipbox dm__flipbox-front--> 
  <div class="dm__flipbox dm__flipbox-back" style="background-image: url('images/work_thumb_02.jpg')"> <!-- Change backside image -->
    <div class="dm__flipbox-content dm__flipbox-content--back">
      <div class="row">
        <div class="col-md-12 col-sm-12">
          <p>Text.</p> <!-- Change backside text -->
        </div>
      </div><!--/.row -->
    </div> <!--/.dm__flipbox-content -->
    <div class="dm__flipbox-overlay dm__flipbox-overlayBack"></div>  
  </div> <!--/.dm__flipbox dm__flipbox-back-->   
 </div> <!--/.dm__flipboxEl -->

The frontside image can be easely changed by changing the url from the “dm__flipbox-front” class. This could be done also for backside image by searching the “dm__flipbox-back” class and replaceing the background image url. Inside of these classes you can customize the flipbox frontside and backside content.

Flipbox general style can be found in app/scss/_general.scss > flipbox. In this file you can change the flipbox animation effect, rotation, background style and many other characteristics.