<div class="row gray-bg">
<div class="container">
<div class="d-row">
<div class="image-wrap">
<div class="boxed-content">
<h2>Sun Glass</h2>
<p>collections</p>
</div>
</div>
</div>
</div>
</div>
.container{
width:1160px;
max-width:90%;
margin:20px auto
}
.gray-bg{
background-color:#e7dfdc
}
.d-row{
background:url(https://pixelthemes.com/wp-content/uploads/2023/12/model.jpg) no-repeat center;
}
.image-wrap{
position:relative;
max-width:450px;
margin:auto;
height:400px
}
.image-wrap img{
vertical-align:bottom
}
.boxed-content{
position:absolute;
bottom:0;
right:0;
padding:0 54px 20px;
box-sizing:border-box;
font-family:'Sacramento', cursive;
font-size:3em;
color: #fff;
background-color: #b3a4c8;
letter-spacing:.02em
}
.boxed-content h2{
font-family: 'Playfair Display', serif;
font-size:0.8em;
text-transform:uppercase;
color:#000;
margin: 0 0 -25%;
transform: translateY(-50%);
letter-spacing:0;
white-space:nowrap
}
.boxed-content p{
margin:0;
position:relative
}
@media(max-width:768px){
.boxed-content{
padding:0 20px 20px
}
}
Demo here…