css
body {
margin: 0;
padding: 50px;
direction: rtl;
box-sizing: border-box;
background-color: #f1f2f3;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.card {
width: 180px;
height: 200px;
border-radius: 10px;
background-color: #fff;
position: relative;
}
.card span {
position: absolute;
width: 50%;
height: 50%;
z-index: 2;
background-color: #8e44ad;
transition: all 0.5s ease;
}
.card span:first-of-type {
border-radius: 0 10px 0 0;
}
.card span:nth-of-type(2) {
left: 0;
border-radius: 10px 0 0 0;
}
.card span:nth-of-type(3) {
bottom: 0;
border-radius: 0 0 10px 0;
}
.card span:last-of-type {
left: 0;
bottom: 0;
border-radius: 0 0 0 10px;
}
.card:hover span {
height: 20px;
width: 20px;
}
.card:hover span:first-of-type {
border-radius: 0 10px 0 0;
}
.card span:nth-of-type(2) {
left: 0;
border-radius: 10px 0 0 0;
}
.card span:nth-of-type(3) {
bottom: 0;
border-radius: 0 0 10px 0;
}
.card span:last-of-type {
left: 0;
bottom: 0;
border-radius: 0 0 0 10px;
}
.card i {
position: absolute;
font-size: 80px;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
transition: all 0.5s ease;
}
.card:hover i {
font-size: 20px;
color: #fff;
background-color: #8e44ad;
top: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
border-radius: 50%;
}
.card .content {
position: absolute;
bottom: 1rem;
text-align: center;
padding: 10px 15px;
z-index: 1;
transform: scale(0);
transition: all 0.5s ease;
transition-delay: 0.1s;
}
.card .content h2 {
margin-bottom: 0;
font-size: 1rem;
}
.card .content p {
margin-top: 0;
font-size: 0.7rem;
}
.card:hover .content {
transform: scale(1);
}
