CODEWITHSUNDEEP
htmlcssimage-clipping
monisha
monisha

Reputation: 245

Is it possible to place a square image over a oval shape image?

I have tried creating a oval shape using CSS and then placing image over it.
But the background egg shape needs to be an image.
Can I get the same look using image on image?
So, the background pink shade is an image and the kitty image will be clipped inside the background pink image.
Any help will be appreciated. Thank you.

   .wrap {
      background-color: #FCF7FB;
      display: flex;
      align-items:center;
      overflow: hidden;
      width: 40em;
      height: 60em;
      margin-top:0.1em;
      margin-left:12em;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      transform: rotate(170deg) skew(4deg); 
      -webkit-transform: rotate(170deg) skew(4deg); 
   }

   .wrap div {
       display: flex;
       align-items:center;
       transform: rotate(-170deg) skew(-4deg); 
      -webkit-transform: rotate(-170deg) skew(-4deg);
      border-radius: 10%/50%;
      height:60em;
      width:100%;
  }
  .wrap img{
    width:110%;
    margin-left:-2em;
  }
<!DOCTYPE html>
<html>
 <head>
</head>
  <body>
    <div class="wrap">
     <div>
       <img src="http://placekitten.com/1920/780" />
     </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 369

Answers (1)

Every Screamer
Every Screamer

Reputation: 530

.wrap {
      background:red;
      display: flex;
      align-items:center;
      overflow: hidden;
      width: 40em;
      height: 60em;
      margin-top:0.1em;
      margin-left:12em;
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      transform: rotate(170deg) skew(4deg); 
      -webkit-transform: rotate(170deg) skew(4deg); 
   }

    .wrap div {
       display: flex;
       align-items:center;
       transform: rotate(-170deg) skew(-4deg); 
      -webkit-transform: rotate(-170deg) skew(-4deg);
      border-radius: 10%/50%;
      height:60em;
      width:100%;


  }

  .wrap div::after{
    content:"";
    width:110%;
    margin-left:-5%;
    float:left;
    height:60em;
      background: url(http://placekitten.com/1920/780) center center no-repeat;
      background-size:contain;
  }

and html

<div class="wrap">
   <div>
   </div>
</div>

Upvotes: 1

Related Questions