<div class="card">
<div class="card-item">
<img
src="https://images.unsplash.com/photo-1534430480872-3498386e7856?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80"
alt=""
/>
<div class="card-content">
<h1>New York</h1>
<p>City</p>
<br />
<div class="info">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
expedita soluta aliquam inventore velit libero.
</p>
</div>
</div>
</div>
<div class="card-item">
<img
src="https://images.unsplash.com/photo-1559305289-4c31700ba9cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=966&q=80"
alt=""
/>
<div class="card-content">
<h1>Bali</h1>
<p>Islands</p>
<br />
<div class="info">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
expedita soluta aliquam inventore velit libero.
</p>
</div>
</div>
</div>
<div class="card-item">
<img
src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1052&q=80"
alt=""
/>
<div class="card-content">
<h1>Paris</h1>
<p>City</p>
<br />
<div class="info">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
expedita soluta aliquam inventore velit libero.
</p>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: #0f1123;
display: flex;
justify-content: center;
}
.card {
justify-content: space-evenly;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
position: relative;
display: grid;
gap: 0 20px;
}
.card .card-item {
background-color: #fff;
width: 300px;
height: 400px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
position: relative;
}
.card-item img {
width: 100%;
height: 100%;
transition: 0.4s ease-in;
border-radius: 10px;
}
.card-content {
position: absolute;
bottom: 10px;
left: 10px;
transition: 0.5s ease-in-out;
color: #fff;
}
.card-content p {
color: #cecece;
transition: 0.5s ease-in-out;
}
.card-content .info {
display: none;
transition: 0.5s ease-in-out;
}
.card-item:hover img {
width: 100%;
height: 200px;
}
.card-item:hover .card-content {
color: #000;
top: 200px;
left: 10px;
}
.card-item:hover p {
color: #313131;
}
.card-item:hover .info {
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.