Animation - Add a flip image with a text

Check out the steps below:

1. Add a section widget on your page

2. Then, drop an image widget into section widget and upload your image

3. Add an HTML widget to the same section

4. Add the required items in the HTML editor, pasting them inside the following values:
<div class="flip-content">....</div> , e.g.:

<div class="flip-content">
  <a href="https://app.dragdropr.com" target="_blank">THIS IS THE LINK TO THE PRODUCT</a>
</div>

5. Click on gear button on the section widget, go to Additional CSS option and paste the code below:

.ddr-page-widget__image {
-webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.ddr-page-widget__html {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;

background-color: #008CBA;

-webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
.ddr-widget {
   position: absolute;
   top: 50%;
   left: 50%;
   text-align: center;
-webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   
}
}

&.flip {
.ddr-page-widget__html {
  opacity: 1;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
  }

.ddr-page-widget__image {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
}

.ddr-page-widget-overlay-wrapper {
.ddr-page-widget__html {
position: relative;
  opacity: 1;
  transform: none;

.ddr-widget {
position: relative;
top: 0;
transform: none;
left: 0;	
}
}
}

Click on Save.

6. Go to Page settings and click on "Add scripts"

7. Paste the following script in the Head section:

<script type="text/javascript">
  (function() {
    var head = document.getElementsByTagName('head').item(0),
        url = 'https://app.dragdropr.com/ddr-scripts/dependency-manager.js?version=1.0.5';

    for (var i = 0; i < head.children.length; i++) {
      if (head.children.item(i).tagName === 'SCRIPT' && head.children.item(i).src.indexOf(url) !== -1) {
        return;
      }
    }

    var node = document.createElement('script');
    node.async = 1;
    node.src = url;
    head.insertBefore(node, null);
  })();
</script>

8. And this one into Body end section:

<script type="text/javascript">
  (function() {
    var callbackFunction = function() {
      if (window.DragDropr && window.DragDropr.dependencyManager && window.DragDropr.dependencyManager.loaded()) {
        var dependencies = "https://code.jquery.com/jquery-3.3.1.slim.min.js".split(',');
        window.DragDropr.dependencyManager.require(dependencies, function() {
          var $ = DragDropr.dependencyManager.window.$;


		$('.flip-content', window.document).parents('.ddr-page-section').each(function(){
			$(this).hover(function(){
			    $(this).addClass('flip');
			  },function(){
			    $(this).removeClass('flip');
			  });
			});
		})
        document.removeEventListener('DragDropr.DependencyManager', callbackFunction);
      }
    };
    document.addEventListener('DragDropr.DependencyManager', callbackFunction);
    callbackFunction();
  })();
</script>

Click on Save.

Now, you may Save your whole Page and see the results by clicking on "Publish -> GET SHAREABLE LINK".