Trying to get the black to be able to see through to the image

[PaulOB]

As it is a 150px box inside a 154px box then a 2px left margin and a 2px top margin would centre it.

Or you can use display:flex on .layer and margin :auto on layer2 or any number of other ways

[asasass]

How come it is not possible to write this part of the CSS this way?

i.e., In order to set the image to have auto height, the image has to be specified in the html.

<img src="https://picsum.photos/500" width="500" alt="Sea View">

Why is that?

code: https://jsfiddle.net/tsw8ocry/2/

.image {
  position: relative;
  display: inline-table;
  width: 500px;
  height: auto;
  overflow: hidden;
  background-image: url("https://via.placeholder.com/500");
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="image">
  <div class="layer">
    <div class="layer2"></div>
  </div>
</div>

[PaulOB]

Background colors and background images are merely a background to whatever content is in that element.

If there is no content then there is no background to paint.

You would need to set the height of the div to match the image height if all you are displaying is the image.

If the image is classed as content then it should be in the HTML anyway. If the image is decoration only then it belongs as a background image.

[asasass]

How would I add text to it?

I got this far, but couldn’t figure out how to place it in the middle.

I tried absolute positing, margin auto, that didn’t work

I tried these, they had no effect.

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;

code: https://jsfiddle.net/fLmhnyz1/1/

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

span {
  font-size: 14px;
  color: #892CDC;
  text-align: center;
  font-family: New Times Roman;
}

.layer {
  display: flex;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 50px;
  box-shadow: 0 0 0 500px blue;
}

.layer2 {
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
  overflow: hidden;
}

<div class="image">
  <img src="https://picsum.photos/500" width="500" alt="Sea View">

  <div class="layer">

    <div class="layer2">
      <span>“Some Text Here”</span>
    </div>
  </div>
</div>

[Ray.H]

@asasass

I got this far, but couldn’t figure out how to place it in the middle.

You can center the text with flexbox, in that case the parent of the span needs to be set to flex with the alignment properties added to it as well.

https://jsfiddle.net/083brwqu/

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

.layer {
  display: flex;
  align-items: center;
  width: 154px;
  height: 154px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 50px;
  box-shadow: 0 0 0 500px blue;
}

.layer2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 150px;
  height: 150px;
  box-shadow: 0 0 0 150px white;
  border-radius: 50%;
  overflow: hidden;
}
  span {
    font-size: 14px;
    color: #892CDC;
    font-family: New Times Roman;
  }