<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>
<div class="form">
<label for="color">Color:</label>
<input type="color" value="#000000" id="color" />
<label for="opacity">Opacity:</label>
<input type="range" min="10" max="65" value="50" id="opacity" />
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--color: #000;
--opacity: 50;
}
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: flex-end;
padding: 10px;
}
.card::after {
content: "";
background-color: var(--color);
opacity: calc(var(--opacity) * 1%);
}
.card__thumb,
.card__content {
grid-area: 1 / -1;
}
.card:nth-child(2)::after,
.card:nth-child(3)::after {
grid-area: 1 / -1;
}
.card__content {
z-index: 2;
}
.form {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
grid-column: 1 / -1;
color: #fff;
}
const color = document.getElementById("color");
const opacity = document.getElementById("opacity");
const root = document.documentElement;
color.addEventListener("change", (etv) => {
root.style.setProperty("--color", etv.target.value);
});
opacity.addEventListener("change", (etv) => {
root.style.setProperty("--opacity", etv.target.value);
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.