Code Preview:
Codepen : Click Here
HTML Code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJ Blogs</title> <link rel="stylesheet" href="card.css"></head><body> <div class="card" id="NewYork"> <div class="overlay"> <div class="content"> <h2><span class="NewYork">NewYork</span></h2> <p2>New York, often called New York City to distinguish it from New York State, or NYC for short, is the most populous city in the United States.</p2> <a href="#">Explore More</a> </div> </div> </div> <div class="card" id="Mumbai"> <div class="overlay"> <div class="content"> <h2><span class="Mumbai">Mumbai</span></h2> <p2>Mumbai lies at the mouth of the Ulhas River on the western coast of India, in the coastal region known as the Konkan.</p2> <a href="#">Explore More</a> </div> </div> </div> <div class="card" id="Tokyo"> <div class="overlay"> <div class="content"> <h2><span class="Tokyo">Tokyo</span></h2> <p2>Tokyo, Japan’s busy capital, mixes the ultramodern and the traditional, from neon-lit skyscrapers to historic temples. </p2> <a href="#">Explore More</a> </div> </div> </div> <div class="card" id="London"> <div class="overlay"> <div class="content"> <h2><span class="London">London</span></h2> <p2>London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times.</p2> <a href="#">Explore More</a> </div> </div> </div></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJ Blogs</title>
<link rel="stylesheet" href="card.css">
</head>
<body>
<div class="card" id="NewYork">
<div class="overlay">
<div class="content">
<h2><span class="NewYork">NewYork</span></h2>
<p2>New York, often called New York City to distinguish
it from New York State, or NYC for short, is the
most populous city in the United States.</p2>
<a href="#">Explore More</a>
</div>
</div>
</div>
<div class="card" id="Mumbai">
<div class="overlay">
<div class="content">
<h2><span class="Mumbai">Mumbai</span></h2>
<p2>Mumbai lies at the mouth of the Ulhas River on
the western coast of India, in the coastal region
known as the Konkan.</p2>
<a href="#">Explore More</a>
</div>
</div>
</div>
<div class="card" id="Tokyo">
<div class="overlay">
<div class="content">
<h2><span class="Tokyo">Tokyo</span></h2>
<p2>Tokyo, Japan’s busy capital, mixes the ultramodern
and the traditional, from neon-lit skyscrapers to
historic temples. </p2>
<a href="#">Explore More</a>
</div>
</div>
</div>
<div class="card" id="London">
<div class="overlay">
<div class="content">
<h2><span class="London">London</span></h2>
<p2>London, the capital of England and the United Kingdom,
is a 21st-century city with history stretching back to
Roman times.</p2>
<a href="#">Explore More</a>
</div>
</div>
</div>
</body>
</html>
CSS Code:
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: space-evenly;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card{
position: relative;
width: 300px;
height: 420px;
box-shadow: 0 5px 10px rgba(0, 0, 0,.2);
overflow: hidden;
}
#NewYork{
background: url(NewYork.jpg)center / cover;
}
#Mumbai{
background: url(Mumbai.jpg)center / cover;
}
#Tokyo{
background: url(Tokyo.jpg)center / cover;
}
#London{
background: url(London.jpg)center / cover;
}
.overlay{
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0,.5);
color: #fff;
transition: .7s;
opacity: 0;
}
.content{
position: absolute;
bottom: 0;
width: 100%;
height: 170px;
display: flex;
padding: 0 10px;
flex-direction: column;
justify-content: space-evenly;
font-family: 'Poppins',sans-serif;
transform: translateY(200px);
transition: .3s;
}
.name{
position: relative;
padding: 3px 0;
}
.name::after{
content:"";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #fff;
transition: .4s;
transition-delay: .5s;
}
.content p{
font-size: 13px;
}
.content a{
display: block;
height: 50px;
text-align: center;
line-height: 50px;
text-decoration: none;
border: 2px solid #fff;
color: #fff;
}
.card:hover .overlay{
opacity: 1;
}
.card:hover .content{
transform: translateY(0);
}
.card:hover .name::after{
width: 100%;
}
Preview Images:
Tags:
Web Development
