Open/close window effect with box-shadows

Question

I was experimenting around with box-shadows and thought it would be possible to make a window effect (as in the example below) so that you can hide text or an image underneath that can only be seen - or "opened" - when you hover/click.

Unfortunately it doesn't work like that, because the shadow will always be below the text or image, which I didn't realize until I was done.

Is there a fix for this, or should I use another way to get the same result without box-shadows?

body {
	background: #20262E;
}

.window {
	display: inline-block;
	height: 200px;
	width: 300px;
	margin: 20px;
	background: #F8F8F8;
	text-align: center;
	line-height: 200px;
}

.window {
	box-shadow: inset 0 200px #0084FF;
	transition: box-shadow 1s ease-in-out;
}

.window:hover {
	box-shadow: inset 0 0 #0084FF;
}

<div class="window">
  box 1
</div>

*Note: I haven't been able to figure out why the transition is flickering :/

Answer 1

Agree that it's probably a bug with box-shadow. If you're looking for another CSS way to handle this, how about the :before or :after pseudo elements?

body {
  background: #20262E;
}

.window {
  display: inline-block;
  height: 200px;
  width: 300px;
  margin: 20px;
  background: #F8F8F8;
  text-align: center;
  line-height: 200px;
  position: relative;
}

.window:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #0084FF;
  transition: bottom 1s ease-in-out;
}

.window:hover:after {
  bottom: 100%;
}

<div class="window">box 1</div>