Removing middle of image revealing text behind it

user_17974392 0
Viewed 24

I have text behind the image, how do I remove it?

I want to punch out a hole in the image revealing the text.

How do I do that? https://jsfiddle.net/eL9x3zrt/

.window {
    display: table;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: black;
    position: relative;
  }
  
  .tcell {
    display: table-cell;
    padding: 18%;
    vertical-align: middle;
    text-align: center;
    font-family: New Times Roman;
    font-size: 18px;
    color: #00AAFF;
  }
  
  .windowframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(https://i.imgur.com/NDjQEdl.jpg);
    background-size: cover;
  }
<div class="window" style="">
  <p class="tcell" style="">I have text here.</p>
  <div class="windowframe" style=""></div>
</div>

css html
2 Answers

If you put the tcell within the windowframe, you can push the text to the front. There are a number of ways you could end up with your desired effect, but the first thing that came to mind for me was:

Stack the elements by putting the tcell text within the window div and the the window div within windowframe. Then you can adjust the width and height of window so that the hole in the picture is the size you desire.

With a few slight changes, I created a large "hole" with the background visible and the same frame dimensions as before

enter image description here

With a few slight changes, I created a large "hole" with the background visible and the same frame dimensions as before.

If you want the hole smaller, you can play around with the dimensions of window within the windowframe.

user_31759040

You can use this.

.window {
  display: table;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: black;
  position: relative;
}

.tcell {
  display: table-cell;
  padding: 8vh;
  position: absolute;
  top: 5vh;
  left: 9vh;
  vertical-align: middle;
  background: #000;
  text-align: center;
  font-family: New Times Roman;
  font-size: 18px;
  color: #00AAFF;
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.windowframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/NDjQEdl.jpg);
  background-size: cover;
}
<p class="tcell" style="">I have text here.</p>
<div class="window" style="">
  <div class="windowframe" style=""></div>
</div>

user_160508480
Related