While playing with box-shadows, I had an idea to create a window effect where you can hide text or an image underneath and reveal it when hovering or clicking (like the example below).
Unfortunately, my initial attempt didn't work as planned because the shadow always stayed below the content, something I realized only after finishing.
Is there a way to fix this issue with box-shadows, or should I explore alternative methods to achieve the same outcome?
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: The transition flickering issue is still puzzling me :/