Make div transparent through parent div

Question

I\'m trying to have a div on top of an image and inside that div to have a border or another div that is transparent so you can see the image below.

Answer 1

A trik could be to draw the background-color from a shadow from your border element.(see css comments)

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  height: 100px;
  overflow: hidden; /*keep children shadow inside*/
  margin: auto
}

.title,
.description {
  padding: 10px;
  position: relative; /* on top of sibblings shadows*/
}

.transparent-through {
  border-bottom: 4px solid transparent;
  box-shadow: 0 0 0 100px blue; /* tune color and area to fill unblured. here set to blue and 100px around */
  width: 90%;
  margin: auto;
}

  

    

      My Title
    
    

    

      Short Description