How do I blur a hole image with transparent text on top of it? (The text is visualized through the bluriness of the image)

noone 0
Viewed 23

The idea is that I want the hole image to be blurred expect where the text is. The text should be seen through the image. Like where the text is, the image isn't blurred. If anyone has any idea would love the help, thanks!

css html
1 Answers

You could use the before and after pseudo-elements to create a blurred image and a non blurred text overlay that fits exactly over the blurred background.

Use filter: blur() to blur the background. And -webkit-background-clip: text; and -webkit-text-fill-color: transparent; to create a text overlay that has the same sharp version of the image as a background fill.

.blur {
    position: relative;
    overflow: hidden;
    height: 500px;
    width: 800px;
}

.blur:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('https://www.fillmurray.com/600/400') center;
    background-size: cover;
    filter: blur(18px);
}

.blur:after {
    content: 'BLUR';
    position: absolute;
    height: 100%;
    width: 100%;
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 260px;
    font-weight: bold;
    text-align: center;
    padding: 100px 0;
    box-sizing: border-box;
    background: url('https://www.fillmurray.com/600/400') center;
    background-size: cover;
    color: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<div class="blur"></div>

Terminator-Barbapapa0
Related