<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/ffbd6d2f88.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card">
<h2>Card Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, minus doloremque iste eos accusantium laborum voluptas.</p>
<button class="card-btn">Visit</button>
<p class="tap">
Tap the card
</p>
<div class="links-container">
<div class="bottom-links">
<a href="#" class="text"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="text"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="text"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</div>
</body>
</html>
body{
height:100vh;
display:grid;
place-items:center;
background-color:rgba(0,0,0,0.9)
}
.card{
box-sizing:border-box;
position:relative;
width:250px;
height:300px;
min-width:150px;
min-height:200px;
border:1px solid rgba(0,0,255,0.4);
border-radius:5px;
padding:1rem 2rem;
background-color:#001f3f;
}
.card h2,.card p{
color:rgba(255,255,255,0.7);
font-family:sans-serif;
}
.card-btn{
padding:0.35rem 2rem;
background-color:#7FDBFF;
border:none;
border-radius:10px;
cursor:pointer;
}
.links-container{
min-width:100%;
position:absolute;
bottom:0;
left:0;
}
.bottom-links{
padding:1rem;
display:flex;
justify-content:space-between;
align-items:center;
background-color:rgba(0,0,0,0.6);
opacity:0;
transition:all 0.5s linear;
text-align:center;
}
.text{
color:#7FDBFF;
}
.tap{
position:absolute;
bottom:0;
left:50%;
transform:translate(-50%);
font-size:0.75rem;
}
.card h2,.card p,.card .card-btn{
transition:all 0.4s linear;
}
.card:hover .bottom-links{
opacity:1;
}
.card:hover h2,
.card:hover p{
opacity:0.5;
}
.card:hover .tap{
opacity:0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.