<div class="card">
<div class="card__thumb">
<img src="https://picsum.photos/966/358?random=1" width="966" height="358" alt="" />
</div>
</div>
<div class="card">
<div class="card__content">
<h2>Card Title</h2>
<p>Some des will go here and I need it to wrap into lines</p>
</div>
</div>
<div class="card">
<div class="card__content">
<h2>Card Title</h2>
<p>Some des will go here and I need it to wrap into lines</p>
</div>
<div class="card__thumb">
<img src="https://picsum.photos/966/358?random=1" width="966" height="358" alt="" />
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
padding: 20px;
display: grid;
place-content: center;
gap: 20px;
grid-template-columns: repeat(3, 30vw);
}
.card {
width: 30vw;
background-color: #fff;
border-radius: 5px;
border: 1px solid #e8e0e0;
box-shadow: 0 3px 10px 0 rgb(0 0 0 / 0.3);
padding: 5px;
display: grid;
}
img {
max-width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 5px;
vertical-align: top;
}
.card__content {
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 50% 10px 10px;
border-radius: 5px;
}
.card__thumb,
.card__content {
grid-area: 1 / -1;
}
.card__content {
z-index: 2;
}
.card__content {
background-image: linear-gradient(
to right,
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.964) 7.4%,
hsla(0, 0%, 0%, 0.918) 15.3%,
hsla(0, 0%, 0%, 0.862) 23.4%,
hsla(0, 0%, 0%, 0.799) 31.6%,
hsla(0, 0%, 0%, 0.73) 39.9%,
hsla(0, 0%, 0%, 0.655) 48.2%,
hsla(0, 0%, 0%, 0.577) 56.2%,
hsla(0, 0%, 0%, 0.497) 64%,
hsla(0, 0%, 0%, 0.417) 71.3%,
hsla(0, 0%, 0%, 0.337) 78.1%,
hsla(0, 0%, 0%, 0.259) 84.2%,
hsla(0, 0%, 0%, 0.186) 89.6%,
hsla(0, 0%, 0%, 0.117) 94.1%,
hsla(0, 0%, 0%, 0.054) 97.6%,
hsla(0, 0%, 0%, 0) 100%
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.