Fakultas Ilmu Komputer UI

Commit 81ae7182 authored by Dhita Putri Pratama's avatar Dhita Putri Pratama
Browse files

[REFACTOR] add hover

parent fa6a22b3
Pipeline #48752 failed with stages
in 3 minutes and 52 seconds
.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;
}
...@@ -7,6 +7,7 @@ import news_image_2 from "../images/education-2.jpg" ...@@ -7,6 +7,7 @@ import news_image_2 from "../images/education-2.jpg"
import news_image_3 from "../images/education-3.jpg" import news_image_3 from "../images/education-3.jpg"
import "./index.css" import "./index.css"
import "../styles/global.css" import "../styles/global.css"
import "./edukasi.css"
const Education = () => { const Education = () => {
return ( return (
...@@ -40,25 +41,33 @@ const Education = () => { ...@@ -40,25 +41,33 @@ const Education = () => {
</Col> </Col>
<Col sm={4}> <Col sm={4}>
<Row className="my-5"> <Row className="my-5">
<Col className="thumbnail text-center"> <div class="column">
<img <div>
src={news_image_2} <figure>
className="img-fluid rounded mx-auto d-block" <img
></img> src={news_image_2}
<Col className=" text-white caption"> className="img-fluid rounded mx-auto d-block"
Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia - Berat />
Badan </figure>
</Col> <span>
</Col> Syarat dan Ketentuan Donor Darah dari PMI: Batas Usia -
Berat
</span>
</div>
</div>
</Row> </Row>
<Row className="my-5"> <Row>
<Col className="thumbnail text-center"> <div class="column">
<img <div>
src={news_image_3} <figure>
className="img-fluid rounded mx-auto d-block" <img
></img> src={news_image_3}
<Col className=" text-white caption">Donor darah di Depok</Col> className="img-fluid rounded mx-auto d-block"
</Col> />
</figure>
<span>Donor Darah di Depok</span>
</div>
</div>
</Row> </Row>
</Col> </Col>
</Row> </Row>
......
...@@ -240,7 +240,7 @@ body { ...@@ -240,7 +240,7 @@ body {
.caption { .caption {
position: absolute; position: absolute;
top: 45%; top: 75%;
left: 0; left: 0;
width: 100%; width: 100%;
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment