<div class="container">
<img src="https://assets.codepen.io/1025350/schitts-creek.png" alt="the cast of Schitt’s Creek"/>
<div class="poster">
<img src="https://assets.codepen.io/1025350/schitts-creek.png" alt="the cast of Schitt’s Creek"/>
</div>
</div>
.container {
background-color: lightsalmon;
width: 850px;
height:500px;
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 1fr 1fr;
gap: 60px 30px;
margin: 0 auto;
img {
width: 250px;
display: block;
z-index: 1;
}
}
.poster {
width: 300px;
padding: 7%;
position: relative;
box-sizing: border-box;
background-color: white;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
filter: saturate(70%) contrast(85%);
&:before,
&:after {
content: "";
width: 100%;
left: 0;
position: absolute;
}
&:before {
height: 4%;
bottom: -4%;
background-repeat: no-repeat;
background-image: linear-gradient(
177deg,
rgba(0, 0, 0, 0.22) 10%,
transparent 50%
);
background-size: 49% 100%;
background-position: 2% 0, 98% 0;
}
&:after {
height: 100%;
top: 0;
z-index: 2;
background-repeat: no-repeat;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 0.1) 0.5%,
rgba(0, 0, 0, 0.15) 1.2%,
transparent 1.2%
),
linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1) 0.5%,
rgba(0, 0, 0, 0.15) 1.2%,
transparent 1.2%
),
linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1) 0.5%,
rgba(0, 0, 0, 0.15) 1.2%,
transparent 1.2%
),
linear-gradient(265deg, rgba(0, 0, 0, 0.2), transparent 10%),
linear-gradient(5deg, rgba(0, 0, 0, 0.2), transparent 15%),
linear-gradient(-5deg, rgba(0, 0, 0, 0.1), transparent 10%),
linear-gradient(5deg, rgba(0, 0, 0, 0.1), transparent 10%),
linear-gradient(-265deg, rgba(0, 0, 0, 0.2), transparent 10%),
linear-gradient(-5deg, rgba(0, 0, 0, 0.2), transparent 15%),
linear-gradient(266deg, rgba(0, 0, 0, 0.2), transparent 10%);
background-size: 50% 100%, 100% 33.3333%, 100% 33.3333%, 50% 33.3333%,
50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%, 50% 33.3333%,
50% 33.3333%;
background-position: right top, left center, left bottom, left top, left top,
right top, left center, right center, right center, left bottom;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.