How to put Simon inside?

HTML & CSS
1

I’ve made a div with an inset shadow, and put Simon on it, but I want him to go behind and in, like you’re looking at him from outside the window. How do I do this? This is what it looks like right now

Screenshot 2023-03-01 at 17-59-25 Multiborder Colors

<div class="box2">
  <img class="cat" src="https://i.ibb.co/98MN0Jd/simon-cat.png"></img>
</div>

.cat {
  width:18em;
  height:8em;
  position:relative;
  top:6em;
  left:-3em;
  z-index:0;
  filter: drop-shadow(10px -20px 6px #000);
}
2

Can you not just pop an overflow: hidden; on the box2 div?

.box2{
  /* code as before */
  overflow: hidden;
}
4 Likes
3

@James_Hibbard I will try that.

4

Hello ladans37,

here is a possible way of doing this

 <div id="box">
  <img src="https://i.ibb.co/98MN0Jd/simon-cat.png" alt="">
  <img src="https://i.ibb.co/98MN0Jd/simon-cat.png" alt="">
</div>
body {
   background-color: #000;
   font: normal 1em / 1.5  sans-serif;
 }
 #box {
   position: relative;
   width: 17em;
   height: 6.7em;
   padding-top: 9em;
   margin: 2em auto;
   border: 0.2em solid #671faa;
   background-color: #444;
   background-image: linear-gradient(60deg, #888, #222);
   overflow: hidden;
  }
 #box img {
   position: absolute;
   width:  22em;
   height: 8.08em;
   left: -3em;
 }
#box img:last-of-type {
   left: -18em;
   filter: drop-shadow( 16em -0.6em 0.3em rgba( 0, 0, 0, 0.9 ));
 }