<div class="block block--blur">
<div class="block__man" id="superman">
<figure>
<img src="https://cdn.newsapi.com.au/image/v1/28811c194076a2f2730455884bdf29ae" alt="">
<figcaption class="block__caption">
<div class="block__name">Superman</div>
</figcaption>
</figure>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.block {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.block__man {
position: relative;
width: 400px;
height: 600px;
figure {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.block__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
color: #fff;
text-align: center;
}
.block__name {
position: relative;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 30px;
}
.block--blur {
.block__caption {
overflow: hidden;
&::before, &::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
filter: blur(8px);
}
&::before {
transform: scale(1.1);
}
}
#superman {
.block__caption::before,
.block__caption::after {
background-image: url('https://cdn.newsapi.com.au/image/v1/28811c194076a2f2730455884bdf29ae');
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.