node cover display

src/components/containers/BlurWrapper/styles.scss

@@ -1,4 +1,7 @@
 .blur {
   filter: blur(0);
   transition: filter 0.25s;
+  max-height: 100vh;
+  width: 100vw;
+  overflow: visible auto;
 }

src/components/containers/PageCover/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+import { createPortal } from 'react-dom';
+import { selectNode } from '~/redux/node/selectors';
+import { connect } from 'react-redux';
+import pick from 'ramda/es/pick';
+import { getURL } from '~/utils/dom';
+
+const mapStateToProps = state => pick(['current_cover_image'], selectNode(state));
+
+type IProps = ReturnType<typeof mapStateToProps> & {};
+
+const PageCoverUnconnected: FC<IProps> = ({ current_cover_image }) =>
+  current_cover_image
+    ? createPortal(
+        <div
+          className={styles.wrap}
+          style={{ backgroundImage: `url("${getURL(current_cover_image)}")` }}
+        />,
+        document.body
+      )
+    : null;
+
+const PageCover = connect(mapStateToProps)(PageCoverUnconnected);
+export { PageCover };

src/components/containers/PageCover/styles.scss

@@ -0,0 +1,30 @@
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: 50% 50% no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  animation: fadeIn 2s;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url(~/sprites/dots.svg) rgba(0, 0, 0, 0.5);
+  }
+}