diff --git a/src/3rdparty/opa.css b/src/3rdparty/opa.css
index be4d104d..2135fd5b 100644
--- a/src/3rdparty/opa.css
+++ b/src/3rdparty/opa.css
@@ -4,10 +4,21 @@
 
     transition: opacity var(--time) var(--ease), transform var(--time) var(--ease);
     transform: scale(.95);
+}
+
+.opa--start {
     opacity: 0;
 }
 
 .opa--visible {
     opacity: 1;
-    transform: scale(1);
+    transform: scale(1) rotateX(0);
 }
+
+figure {
+    width: 100px;
+}
+
+figure img{
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/3rdparty/opa.js b/src/3rdparty/opa.js
index 695f2c86..382d1a28 100644
--- a/src/3rdparty/opa.js
+++ b/src/3rdparty/opa.js
@@ -875,6 +875,7 @@ var runAppear = function () {
             while (1) {
                 switch (_context3.prev = _context3.next) {
                     case 0:
+                        item.classList.remove('opa--start');
                         item.classList.add('opa--visible');
                         return _context3.abrupt('return', timeout(500, item).then(function (item) {
                             item.dataset.opaAppeared = true;
@@ -883,7 +884,7 @@ var runAppear = function () {
                             return item;
                         }));
 
-                    case 2:
+                    case 3:
                     case 'end':
                         return _context3.stop();
                 }
@@ -1000,6 +1001,11 @@ var Opa = function () {
     }
 
     (0, _createClass3.default)(Opa, [{
+        key: 'initElement',
+        value: function initElement() {
+            this.item.classList.add('opa--start');
+        }
+    }, {
         key: 'appearAfter',
         value: function appearAfter(item) {
             this.after = item;
@@ -1106,8 +1112,6 @@ var Opa = function () {
 document.addEventListener('DOMContentLoaded', function () {
     var groups = splitGroups([].concat((0, _toConsumableArray3.default)(document.querySelectorAll('.opa'))));
 
-    console.log(groups);
-
     groups.map(initOpaGroup);
 });