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

Question

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>

Correct me if I'm wrong, so you want an `img` element to be oval shape? and another `img` element is display on it but a square shaped `img`? — Francis G, Aug 28 '19 at 07:59
Yes exactly..But the square image should look like its clipped inside a oval shape. — monisha, Aug 28 '19 at 08:02
I think you are looking for clip masking here is ref link that may help https://css-tricks.com/clipping-masking-css/ — Varsha Dhadge, Aug 28 '19 at 08:04
Then why not just add a background to the container of the `img` like `Every Screamer` answer? — Francis G, Aug 28 '19 at 08:08
@VarshaDhadge The oval shape needs to be an and not made using clip-path. So basically, I have an image which looks similar to the background pink oval shape. I want to replace the css with the img so that the output looks the same. — monisha, Aug 28 '19 at 08:09
@Francisaskquestion But that shows a gap between the oval shape and the kitty. Also the corners of the kitty images remain squared. — monisha, Aug 28 '19 at 08:14
Well you can compensate that by adding style to both elements — Francis G, Aug 28 '19 at 08:15
@Francisaskquestion But the kitty image is going to be dynamic as well as responsive so I will have to check that too. — monisha, Aug 28 '19 at 08:20
Well it will be depends on your styles, like I said you can customize the styles of the container and the image. — Francis G, Aug 28 '19 at 08:26
I tried the answer of @EveryScreamer answer, and it's working fine, what do you mean that it is going to be dynamic and there will be a gap? — Francis G, Aug 28 '19 at 08:30
Using that answer, the kitty covers the entire oval shape.. It should only cover part of it,similar to the current output I had shared — monisha, Aug 28 '19 at 09:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198578/discussion-between-monisha-and-francis-ask-question). — monisha, Aug 28 '19 at 10:24

Every Screamer · Answer 1 · 2019-08-28T11:52:15.863

.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>

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

1 Answers1