How do I get deteted image using text effect using css?

Question

can someone help me to get effect like this? the background image needs to be deleted using text like image given below. with css

Black svg image with the letters cut off and the picture set as deep layer. — SIMBIOSIS surl, Aug 23 '21 at 02:28
manually set up svg?? using illustrator?? is it possible using css tho? — Salil Rajkarnikar, Aug 23 '21 at 02:33
It is possible using css. I do not know how. What I do know is using svg. You can create the svg in Illustrator but I recommend Inkscape as it is a web friendly svg what you need and Inkscape provides native svgs. — SIMBIOSIS surl, Aug 23 '21 at 02:38

dale landry · Accepted Answer · 2021-08-23T03:43:24.697

You can use background-clip with -webkit-text-fill-color: transparent with a pseudo element.

Place an element with a background image and a position of relative. Then place an element inside that element and cover 50vw of the width 100% of the height of its parent, then position it absolute and place left or right and top @ 0. Then you can set style text as you like. set the background-clip to text, background-clip: text; and set -webkit-text-fill-color: transparent, set background-size to cover on both parent and clip elements.

Now set a pseudo element to place your black background. .clip-area::before set the background to black, width to 50% and height to 100%, left or right and top to 0 and z-index to -1.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#bg {
  width: 100vw;
  height: 100vw;
  background: url(https://d2jx2rerrg6sh3.cloudfront.net/image-handler/ts/20200123101248/ri/673/picture/2020/1/shutterstock_603198743.jpg) no-repeat;
  position: relative;
  z-index: 1;
  background-size: cover;
}

.clip-area {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100%;
  line-height: 3.5rem;
  font-size:  clamp(2rem, 3.5vw, 5rem);
  text-align: center;
  text-transform: uppercase;
  font-family: 'Open Sans Pro', sans-serif;
  font-weight: bold;
  background: url(https://d2jx2rerrg6sh3.cloudfront.net/image-handler/ts/20200123101248/ri/673/picture/2020/1/shutterstock_603198743.jpg);
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clip-area::before {
  content: '';
  background: black;
  width: 50vw;
  height: calc(100% - 6px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  margin: 3px;
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

<div id="bg">
  <div class="clip-area">
    You can use text clipping to show the background below
  </div>
</div>

I'd be interested to see this as working interactive code here on stack overflow (I'm on my phone). — Nick, Aug 23 '21 at 03:38
@Nick there's a snippit in the answer, check it out when you get to desktop. — dale landry, Aug 23 '21 at 03:39
No IE support for -webkit-text-fill-color but that's no surprise. This is awesome! — Nick, Aug 23 '21 at 03:42
but this isn't actually clipping background right? its just adding image overlay text. am i correct? — Salil Rajkarnikar, Aug 23 '21 at 04:45
@SalilRajkarnikar it is removing the background on the text layer, then overlaying that text layer on top of the background with the image, using the same image on both layers. — dale landry, Aug 24 '21 at 00:43

How do I get deteted image using text effect using css?

1 Answers1