Hide overflow from given edge of box only in CSS-CodePudding

Hi I want to make a 3D box design, That should looks like object coming out from box.

Here one images will be there inside a box.
Image will be bigger than container box.
I want to hide overflow from left and bottom only.

I am struggling for making this design since 4 hours, but not getting result and solutions.

Here is the demo that i wants to build:

CodePudding user response：

Can you please check this

I use grid layout model. You can place your image inside .container has position: absolute; on it

*,
*::before,
*::after {
  box-sizing: border-box;
}


img,
picture {
  max-width: 100%;
  display:block;
}

body{
  min-height: 100vh;
  display: grid;
  place-content: center;
}


.container{
  display: grid;
  grid-template-columns: 1fr 2fr 1fr ;
  grid-template-rows: 1fr 3fr 1fr;
  width: 750px;
  height: 750px;
  /* background-color: tomato; */
  position: relative;
}

.box{
  position: relative;
  background-color: tomato;
  z-index:2;
}


.box-1{
  grid-column: 2 / 4;
  grid-row: 1;
  z-index:1;
}

.box-2{
  grid-column: 3;
  grid-row: 2 / 3;
  z-index:1;
}

.box-3{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: yellowgreen;
  z-index:1;
}


.box-4{
  grid-column: 1;
  grid-row: 1 / -1;
  
  overflow: hidden;
}

.box-5{
  grid-column: 2 / -1;
  grid-row: 3;
  overflow: hidden;
}

.box-6{
  position: absolute;
  z-index: 1;
}

<div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div >
        <img src="https://source.unsplash.com/random/780x400" alt="" />
      </div>
</div>

CodePudding user response：

  .red {
    width: 300px;
    height: 300px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hide {
    width: 97px;
    position: absolute;
    background-color: red;
    height: 60px;
    top: 234px;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>


<body>

  <div >
    <div style="width: 150px; height: 150px; background-color: yellow">
      <img src="run.png" width="150" height="220" style="margin-top: -20px;">
      <div ></div>
    </div>
  </div>

</body>

</html>