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.

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

.floater {
  width: 400px;
  height: 100px;
  background: blue;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  border-bottom: 4px solid black;
  width: 90%;
  margin: auto;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

I am trying to make the back "transparent-through" div transparent so you can see the image underneath the parent div.

and example is here:

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;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 2

Create the blue background as a shadow of the transparent-through element.

Set overflow hidden on the floater to keep it from expanding outwards

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

.floater {
  margin-top: 20px;
  width: 400px;
  height: 150px;
  overflow: hidden;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  height: 60px;
  width: 90%;
  margin: auto;
  box-shadow: 0px 0px 0px 100px blue;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 3

You can use multiple background using linear-gradient to create the transparent part without the need of an extra element:

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

.floater {
  width: 400px;
  background: 
  linear-gradient(blue,blue) 0 0/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 100%/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 0/50px 100% no-repeat,
  linear-gradient(blue,blue) 100% 0/50px 100% no-repeat;
 
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Here is a more ticky idea using clip-path:

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

.floater {
  width: 400px;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
  background:blue;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Another one using inset box-shadow:

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

.floater {
  width: 400px;
  box-shadow:0 0 0 50px blue inset;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

You can also consider pseudo-element with borders:

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

.floater {
  position:relative;
  width: 400px;
  z-index:0;
}
.floater:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-width:50px 20px 50px 20px;
  border-style:solid;
  border-color:blue;
  z-index:-1;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 4

make the parent div position:relative and z-index:0 and make the child div position:absolute and z-index:10

this is an example follow this example you can do it .

.check
{
position:relative;
width:100%;
height:50%:
z-index:0;
}
.check img
{
width:100%;
height:50%;
}
.form-box
{
    position: absolute;
    top:0;
    right:0;
    background-color:rgba(255,255,255,0.8);
    z-index:10;
    height:100%;
    padding-top:40px;
    width:50%;
}

<html>
<div class="check">
<img src="https://cdn.vox-cdn.com/thumbor/th5YNVqlkHqkz03Va5RPOXZQRhA=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg">
</div>
<div class="form-box">
<h1>BISWAJIT</h1>
</div>