Hide element behind transparent div

Question

I'm trying to make next animation: logo should be revealed by the div moving down. Div has a transparent background.

Is it possible to hide overlaying part of logo behind transparent div?

<div class="transparent">Some content</div>
<div class="logo"></div>

.transparent { position: relative }
.logo { position: absolute }

Answer 1

I very much doubt if you could clip or mask anything behind a transparent element.

So, perhaps you need to rethink the "hiding behind" part and consider other options.

Perhaps animating the height:

* {
  padding: 0;
  margin: 0;
}
.transparent {
  height: 2em;
  line-height: 2em;
  border-bottom: 1px solid grey;
  position: relative;
}
.logo {
  height: 0;
  background: orange;
  position: absolute;
  top: 100%;
  width: 100px;
  transition: height 0.5s ease;
}
.transparent:hover .logo {
  height: 25px; /* assuming height is known */
}

<div class="transparent">Some content
  <div class="logo"></div>
</div>