Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
body {
padding: 5%;
}
.box1 {
position: relative;
width: 300px;
height: 200px;
border: #333 3px solid;
border-radius: 10px;
background-image: url("images/sample2.jpg");
background-size: cover;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
overflow: hidden;
&::before {
content: "";
display: block;
position: absolute;
top: -25px;
right: -70px;
width: 170px;
height: 25px;
background-color: #e33;
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
color: #fff;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
}
.box2 {
position: relative;
margin-top: 50px;
width: 300px;
height: 200px;
border: #fff 3px solid;
background-image: url("images/sample1.jpg");
background-size: cover;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
overflow: hidden;
&::before {
content: "\56DB\3064\8449\3067\3059";
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
background-color: #000;
opacity: .5;
font-size: 16px;
color: #aaa;
}
}
.box3 {
position: relative;
margin-top: 50px;
width: 200px;
height: 200px;
background-image: url("images/sample3.jpg");
background-size: cover;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
overflow: hidden;
&:hover::before {
content: "\30AF\30EA\30C3\30AF\3067\8A73\7D30\FF01";
display: block;
width: 200px;
height: 200px;
background-color: #000;
opacity: .5;
font-size: 16px;
color: #fff;
}
}
.lists {
position: relative;
margin-top: 50px;
margin-left: 25px;
padding: 0;
list-style-type: none;
& >li::before {
content: "";
position: absolute;
display: block;
left: -15px;
width: 5px;
height: 10px;
border-right: #5aa 2px solid;
border-bottom: #5aa 2px solid;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment