[REFACTOR] add hover

frontend/src/pages/edukasi.css

+.column {
+  margin: 15px 15px 0;
+  padding: 0;
+}
+.column:last-child {
+  padding-bottom: 60px;
+}
+.column::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+.column div {
+  position: relative;
+  float: left;
+  width: 300px;
+  height: 200px;
+  margin: 0 0 0 25px;
+  padding: 0;
+}
+.column div:first-child {
+  margin-left: 0;
+}
+.column div span {
+  position: absolute;
+  bottom: -70px;
+  left: 0;
+  z-index: -1;
+  display: block;
+  width: 300px;
+  margin: 0;
+  padding: 0;
+  color: #444;
+  font-size: 18px;
+  text-decoration: none;
+  text-align: center;
+  -webkit-transition: 0.3s ease-in-out;
+  transition: 0.3s ease-in-out;
+  opacity: 0;
+}
+figure {
+  width: 300px;
+  height: 200px;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  overflow: hidden;
+}
+figure:hover + span {
+  bottom: -55px;
+  opacity: 1;
+}

frontend/src/pages/edukasi.js

@@ -7,6 +7,7 @@ import news_image_2 from "../images/education-2.jpg"
 import news_image_3 from "../images/education-3.jpg"
 import "./index.css"
 import "../styles/global.css"
+import "./edukasi.css"
 
 const Education = () => {
   return (
@@ -40,25 +41,33 @@ const Education = () => {
           </Col>
           <Col sm={4}>
             <Row className="my-5">
-              <Col className="thumbnail text-center">
-                <img
-                  src={news_image_2}
-                  className="img-fluid rounded mx-auto d-block"
-                ></img>
-                <Col className=" text-white caption">
-                  Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia - Berat
-                  Badan
-                </Col>
-              </Col>
+              <div class="column">
+                <div>
+                  <figure>
+                    <img
+                      src={news_image_2}
+                      className="img-fluid rounded mx-auto d-block"
+                    />
+                  </figure>
+                  <span>
+                    Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia -
+                    Berat
+                  </span>
+                </div>
+              </div>
             </Row>
-            <Row className="my-5">
-              <Col className="thumbnail text-center">
-                <img
-                  src={news_image_3}
-                  className="img-fluid rounded mx-auto d-block"
-                ></img>
-                <Col className=" text-white caption">Donor darah di Depok</Col>
-              </Col>
+            <Row>
+              <div class="column">
+                <div>
+                  <figure>
+                    <img
+                      src={news_image_3}
+                      className="img-fluid rounded mx-auto d-block"
+                    />
+                  </figure>
+                  <span>Donor Darah di Depok</span>
+                </div>
+              </div>
             </Row>
           </Col>
         </Row>

frontend/src/styles/global.css

@@ -240,7 +240,7 @@ body {
 
 .caption {
   position: absolute;
-  top: 45%;
+  top: 75%;
   left: 0;
   width: 100%;
 }