Hi Rob,

This shouldn't be too difficult - you can even use the CSS from the codepen you linked to if you'd like. SuperFlexi is fully documented, I'd recommend you read through the docs before attempting this. Here are most of the key steps you'll need to follow, without getting into the exact details of the HTML & CSS side:

1. Include the CSS for the flip boxes in your skin just as you would any other CSS.
2. Duplicate the Icon Blocks solution in /data/SuperFlexi/Solutions and rename it (maybe call it "Flip Blocks").
3. Rename the "icon-blocks.sfFields" and "icon-blocks.sfMarkup" files (for example to "flip-blocks.sfFields" and "flip-blocks.sfMarkup").
4. Generate a new GUID and update the fieldDefinitionGUID at the top of both files.
5. In your Markup Definition, change the "name" attribute near the top to "Flip Blocks" - then do a find for "icon-blocks" and replace it with "flip-blocks" (or whatever else you want to use for your CSS classes)
6. In your Field Definition, change the "name" attribute near the top to match the one you put in the Markup Definition.
7. In your Markup Definition, change the content of your <ItemMarkup /> element to be pretty much like the HTML from the codepen you linked to, but only add a single instance of the div with the class "hover panel" and its children. (if you want gridding, and you're using a Framework skin, you'll need to leave the wrapping div with the grid class, but replace their "col_third" with our "col-md-4" - you can also leave the flexbox classes if you want but I can't promise they won't mess up the flipbox effect.
8. Also inside the <ItemMarkup /> element, replace the actual content with the appropriate tokens. For instance, <p>Front Side</p> might become something like this:

   <div class="flip-block__icon">
   	<i class="$icon$"></i>
   </div>
   <h3 class="flip-block__title">$title$</h3>

   and <p>Back Side</p> might become something like this:

   <div class="flip-block__body">
   	$content$
   </div>

9. Lastly, either comment out the <style> element altogether, or change it's name away from "iconBlockBaseCSS" and change the referenced file name as well.

If you set this up and run into any trouble I'll be happy to troubleshoot it with you.

Hope this helps!