mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
100 lines
2 KiB
HTML
100 lines
2 KiB
HTML
<div class="card">
|
|
<div class="card-img"></div>
|
|
<div class="card-info">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="currentColor"></path></svg>
|
|
<p class="text-title">Card title</p>
|
|
<p class="text-body">Lorem Ipsum dolor sit amet</p>
|
|
<button class="card-button">Read More</button>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by alexruix - Tags: card */
|
|
.card {
|
|
width: 190px;
|
|
height: 254px;
|
|
border-radius: 1em;
|
|
padding: 1.9rem;
|
|
background: #f5f5f5;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
transition: 0.4s ease-out;
|
|
box-shadow: 0px 7px 20px rgba(43, 8, 37, 0.2);
|
|
}
|
|
|
|
.card:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(238, 116, 116, 0.4);
|
|
z-index: 2;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.card-info {
|
|
position: relative;
|
|
z-index: 3;
|
|
color: #f5f5f5;
|
|
opacity: 0;
|
|
transform: translateY(20%);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
/*Text*/
|
|
.text-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.text-body {
|
|
letter-spacing: 1px;
|
|
font-size: 0.9rem;
|
|
margin: 5px 0 15px 0;
|
|
}
|
|
|
|
/*Button*/
|
|
.card-button {
|
|
padding: 0.6rem;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: #ee9ca7;
|
|
color: white;
|
|
font-weight: bold;
|
|
transition: 0.4s ease;
|
|
}
|
|
|
|
/*Image*/
|
|
.card-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background: #ee9ca7;
|
|
background: linear-gradient(to bottom, #e7aeae, #ee9ca7);
|
|
}
|
|
|
|
/*Hover*/
|
|
.card:hover {
|
|
transform: translateY(5%);
|
|
}
|
|
|
|
.card:hover:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card:hover .card-info {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.card-button:hover {
|
|
background: rgba(218, 77, 77, 0.4);
|
|
color: #f5f5f5;
|
|
}
|
|
</style>
|