Removing middle of image revealing text behind it

[asasass]

https://jsfiddle.net/3uzm9qb1/2/

I have text behind the image.

I just want to cut out the circle revealing the text.

I forgot how to do this.

I think this is used.

clip-path: circle(25% at center);

It’s not the same as the other codes, so it is set up differently.

[asasass]

I figured this out. https://jsfiddle.net/7qot21wx/4/

but text is not centered in the middle.

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

.windowframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://i.imgur.com/NDjQEdl.jpg);
  background-size: cover;
  clip-path: circle(50% at center);
}

.windowframe2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  background-size: cover;
  clip-path: circle(45% at center);
}

p {
  padding: 18%;
  vertical-align: middle;
  text-align: center;
  font-family: New Times Roman;
  font-size: 18px;
  color: #00AAFF;
}

<div class="window" style="">

  <div class="windowframe" style=""></div>

  <div class="windowframe2" style="">

    <p style="">I have text here.</p>
  </div>

</div>

[asasass]

This works well. https://jsfiddle.net/u92pLvb0/1/

 .windowframe {
    position: relative;
    width: 150px;
    height: 150px;
    background-image: url(https://i.imgur.com/NDjQEdl.jpg);
    background-size: cover;
    clip-path: circle(50% at center);
  }

  .window {
    display: table;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  .tcell {
    display: table-cell;
    padding: 18%;
    vertical-align: middle;
    text-align: center;
    font-family: New Times Roman;
    font-size: 18px;
    color: #00AAFF;
  }

<div class="windowframe" style="">
  <div class="window" style="">
    <p class="tcell" style="">I have text here.</p>
  </div>
</div>

[asasass]

Got it. https://jsfiddle.net/3kqLyzxd/4/

What I am after.

Figured it out by mixing and matching different codes of mine I have saved.

.image {
  position: relative;
  display: inline-table;
  overflow: hidden;
}

.layer {
  display: flex;
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  top: 15px;
  left: 30px;
  box-shadow: 0 0 0 5px blue;
}

.layer2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 140px;
  height: 140px;
  box-shadow: 0 0 0 140px transparent;
  border-radius: 50%;
  background: transparent;
}

.window {
  display: table;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: black;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.tcell {
  display: table-cell;
  padding: 18%;
  vertical-align: middle;
  text-align: center;
  font-family: New Times Roman;
  font-size: 18px;
  color: #00AAFF;
}

<div class="image">
  <img src="https://i.imgur.com/lLoBh4z.jpg" height="200" alt="Sea View">

  <div class="windowframe" style="">

    <div class="layer">
      <div class="layer2">
        <div class="window" style="">
          <p class="tcell" style="">I have text here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

[PaulOB]

@asasass

What I am after.

That doesn’t seem to be anything like what you said in the first post?

If that last example is what you want then you can rid of 90% of your html and just do this.

<figure class="seaview">
  <img src="https://i.imgur.com/lLoBh4z.jpg" height="200" alt="Sea View">
  <figcaption>I have text here.</figcaption>
</figure>

Most of your css and html is redundant and completely wrong for the task in hand.

Semantics first and embellishments later.

[asasass]

That improved it a whole lot.

wow. Thanks!