Creating the flip effect in a simple manner without lots of CSS
<!-- horizontal -->
<div class="flip flip-h" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<div class="flip-front">
<svg class="img-svg img-5x img-muted flip-image">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#node-js"></use>
</svg>
</div>
<div class="flip-back">
<svg class="img-svg img-5x img-primary flip-image">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#heart"></use>
</svg>
</div>
</div>
<!-- active -->
<div class="flip flip-h flipped" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<div class="flip-front">
<svg class="img-svg img-5x img-muted flip-image">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#node-js"></use>
</svg>
</div>
<div class="flip-back bg-white">
<svg class="img-svg img-5x img-primary flip-image">
<use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#heart"></use>
</svg>
</div>
</div>
Use .rounded-circle
.
<!-- horizontal -->
<div class="flip flip-h rounded-circle">
<div class="flip-front">
...
</div>
<div class="flip-back">
...
</div>
</div>
<div class="flip flip-h">
<div class="flip-front">
<svg class="img-svg img-5x img-muted flip-image">
<use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#docker"></use>
</svg>
</div>
<div class="flip-back">
<div class="flex-xs flex-xs-middle h-100">
<div class="btn-group mx-auto" role="group">
<button type="button" class="btn btn-secondary tooltip-test" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="Permissions"><span class="icon icon-lock-open"></span></button>
<button type="button" class="btn btn-secondary tooltip-test" data-toggle="tooltip" data-trigger="hover" data-placement="top" title="Edit"><span class="icon icon-pencil"></span></button>
</div>
</div>
</div>
</div>
flip-h
: Horizontal flipflipped
: Active class