Merge pull request #123 from m5stack/master

pull from en

docs/assets/css/main.css

@@ -23,6 +23,7 @@ body[data-page="index.md"] article.markdown-section .item {
     width: 150px;
     margin-right: 10px;
     display: inline-block;
+    position:relative;
 }
 
 body[data-page="index.md"] article.markdown-section p.item-title {
@@ -38,6 +39,7 @@ body[data-page="zh_CN/README.md"] article.markdown-section .item {
     width: 150px;
     margin-right: 10px;
     display: inline-block;
+    position:relative;
 }
 
 body[data-page="zh_CN/README.md"] article.markdown-section p.item-title {
@@ -195,7 +197,9 @@ body[data-page="ja/README.md"] #faces-kit {
 #lego_plus,
 #encoder,
 #joystick-1,
-#fan {
+#fan ,
+#faces-rfid,
+#faces-finger{
     width: 0;
     height: 0;
     overflow: hidden;
@@ -266,7 +270,12 @@ body[data-page="ja/README.md"] #faces-kit {
 #butterfly,
 #pahub,
 #pbhub,
-#m5-bit {
+#m5-bit,
+#vibrator-motor,
+#unit-fan,
+#op90,
+#op180,
+#accel {
     width: 0;
     height: 0;
     overflow: hidden;
@@ -354,3 +363,22 @@ body[data-page="ja/README.md"] #application {
     margin: 0;
     padding: 0;
 }
+
+
+.mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 150px;
+    height: 150px;
+    background: rgba(0, 0, 0, 0.7);
+    color: #ffffff;
+    opacity: 0;
+}
+.mask h3 {
+    text-align: center;
+}
+
+.item a:hover .mask {
+    opacity: 1;           
+}