How to put Simon inside?

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=""></img>
.cat {
  filter: drop-shadow(10px -20px 6px #000);

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

  /* code as before */
  overflow: hidden;

@James_Hibbard I will try that.

Hello ladans37,

here is a possible way of doing this

 <div id="box">
  <img src="" alt="">
  <img src="" alt="">
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 ));

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.