<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>
<button>Toggle</button>
@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;
}
.card {
width: 30vw;
aspect-ratio: 4 / 3;
position: relative;
background-color: #fff;
border-radius: 5px;
border: 1px solid #e8e0e0;
box-shadow: 0 3px 10px 0 rgb(0 0 0 / 0.3);
padding: 5px;
}
img {
max-width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
border-radius: 5px;
vertical-align: top;
}
.card__content {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
z-index: 2;
padding: 10px;
background-image: linear-gradient(to top, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0));
border-radius: 5px;
}
.card {
transform: translate(calc(-50% - 20px));
transition: all 0.2s linear;
}
.card__content {
transform: translate(calc(100% + 40px));
transition: all 0.2s linear;
}
.card.overlay::after {
transform: none;
}
.card.overlay .card__content {
transform: none;
}
button {
display: inline-flex;
justify-content: center;
align-items: center;
border: none 0;
color: #fff;
text-transform: capitalize;
font-size: 18px;
padding: 20px 0px;
border-radius: 6px;
background-color: #d90368;
font-family: "Exo", Arial, sans-serif;
cursor: pointer;
}
const button = document.querySelector("button");
const card = document.querySelector(".card");
button.addEventListener("click", () => {
card.classList.toggle("overlay");
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.