Css info cards | css info cards using html and css
Css info cards | css info cards using html and css
Css info cards | css info cards using html and css
Code:
Html code:-
<div class="wrap">
<div class="card">
<div class="footer">
<div class="content">
<div class="title">Shanghai</div>
<div class="text">Worlds largest city.</div>
</div>
</div>
</div>
<div class="card">
<div class="footer">
<div class="content">
<div class="title">New York</div>
<div class="text">The city that never sleeps.</div>
</div>
</div>
</div>
<div class="card">
<div class="footer">
<div class="content">
<div class="title">Seattle</div>
<div class="text">The Emerald City.</div>
</div>
</div>
</div>
</div>
HTML Output:-
Css code:-
@import url('https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap');
html, body{
background: #f7f7f7;
margin: 0px;
}
.wrap{
& .card{
position: relative;
margin: 40px auto;
width: 350px;
height: 220px;
overflow: hidden;
border-radius: 6px;
box-shadow: 0px 10px 20px rgba(0,0,0,0.15);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
cursor: pointer;
transition: 200ms cubic-bezier(0.5, 0.5, 0.0, 1.0);
&:hover{
box-shadow: 0px 20px 20px rgba(0,0,0,0.25);
transform: translateY(-10px);
}
&:after{
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
&:nth-child(1){
background-image: url("https://images.unsplash.com/photo-1455459182396-ae46100617cb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
&:after{
background: linear-gradient(225deg, rgba(235,73,225,0.7) 0, rgba(85,0,215,0.3) 75%);
}
& .footer{
background: linear-gradient(225deg,#eb49e1 0,#5500d7 75%);
}
}
&:nth-child(2){
background-image: url("https://images.unsplash.com/photo-1470219556762-1771e7f9427d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
&:after{
background: linear-gradient(225deg, rgba(255,143,0,0.7) 0, rgba(255,220,0,0.3) 75%);
}
& .footer{
background: linear-gradient(225deg,#ff8f00 0,#ffdc00 75%);
}
}
&:nth-child(3){
background-image: url("https://images.unsplash.com/photo-1538097304804-2a1b932466a9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ");
&:after{
background: linear-gradient(225deg, rgba(0,220,192,0.7) 0, rgba(0,90,240,0.3) 75%);
}
& .footer{
background: linear-gradient(225deg,#00dcc0 0,#005af0 75%);
}
}
& .footer{
font-family: ZCOOL XiaoWei;
color: #fff;
position: absolute;
z-index: 1;
bottom: 0px;
left: 0px;
width: 100%;
box-shadow: 0px 0px 0px rgba(0,0,0,0);
transform: translate(0%, 100%);
transition: 200ms cubic-bezier(0.5, 0.5, 0.0, 1.0);
transition-delay: 300ms;
& .content{
padding: 10px 30px;
z-index: 2;
& .title{
font-size: 21px;
font-weight: 600;
padding: 0px 0px 10px 0px;
}
& .text{
}
}
}
&:hover .footer{
box-shadow: 0px 0px 20px rgba(0,0,0,0.15);
transform: translate(0%, 0%);
}
}
}
Final output:-

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
yes it ready CSS INFO CARD you can easily share the information of city or anything.