CSS
body, html {
margin:0px;
padding:0px;
font-family: 'Titillium Web', sans-serif;
font-size: 23px;
line-height: 42px;
font-weight: 100;
text-align:center;
height: 100%;
}
section {
/* background: #dce7eb; */
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.sampah {
background:#000;
width: 66px;
height: 80px;
display: inline-block;
margin:0 auto;
position: relative;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.sampah:after {
content: 'Hover to open the bin';
position: absolute;
left: -120px;
right: 0;
bottom: -50px;
width: 300px;
}
.sampah span {
position: absolute;
height: 12px;
background: #000;
top: -19px;
left: -10px;
right: -10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform: rotate(0deg);
transition: transform 250ms;
transform-origin: 19% 100%;
}
.sampah span:after {
content: '';
position: absolute;
width: 27px;
height: 7px;
background: #000;
top: -10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
transform: rotate(0deg);
transition: transform 250ms;
transform-origin: 19% 100%;
left: 27px;
}
.sampah i {
position:relative;
width: 5px;
height:50px;
background:#fff;
display:block;
margin:14px auto;
border-radius: 5px;
}
.sampah i:after {
content: '';
width: 5px;
height: 50px;
background: #fff;
position: absolute;
left: -18px;
border-radius: 5px;
}
.sampah i:before {
content: '';
width: 5px;
height: 50px;
background: #fff;
position: absolute;
right: -18px;
border-radius: 5px;
}
.sampah:hover span {
transform: rotate(-45deg);
transition: transform 250ms;
}
