artical explode with prevue

css/shared.css

@@ -19,10 +19,18 @@ body {
 
 
 .artical{
-	width: min(100vw, 55em);
+	width: min(calc(100vw - 4em), 55em);
 	margin:auto;
-	text-align: center;
-	padding: 0px;
+	margin-top: 2em;
+	height: 25em;
+	overflow: hidden;
+	transition-duration: 1.5s;
+}
+
+.artical:hover{
+	width:calc(100% - 8em);
+	height:calc(100vh - 6em);
+	overflow: scroll;
 }
 
 .artical h1 {
@@ -36,6 +44,18 @@ body {
 	height: 0.3em;
 }
 
+.artical:hover .preview{
+	display:none;
+}
+
+.content{
+	display:none;
+}
+
+.artical:hover .content{
+	display:block;
+}
+
 .glass{
 	background: rgba(128, 128, 128, 0.35);
 	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);