JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="contain1">

<img src="https://www.hloe.co.uk/photo.jpg"/>
<div class="top"></div>
<div class="bottom"></div>
</div>
<!--
<div class="contain2">
<div class="top"></div>

</div>

<div class="page">

</div>

CSS

body {margin:0;background-color:#000000;}
.contain1 {position:relative;width:100%;aspect-ratio:3/1;background-color:white;overflow:hidden;}
.contain1 .top {position:absolute;background-color:black;top:0;left:0;width:100%;height:20%;border-radius: 50%/0 0 80% 80%;}
.contain1 .bottom {position:absolute;background-color:black;bottom:-1px;left:0;width:100%;height:20%;border-radius: 50%/0 0 80% 80%;transform: scale(-1, -1);}

.contain1 img {width: 100%;height:100%;position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
animation-name: myAnimation;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}

  @keyframes myAnimation {
0% {width: 100%;}
50%  {width: 120%;}
100% {width: 100%;}
}


.contain2 {position:relative;width:100%;height:100px;background-color:#10455b;}
.contain2 .top {position:absolute;background-color:black;top:0;left:0;width:100%;height:50%;border-radius: 50%/0 0 80% 80%;}
.contain2 .bottom {position:absolute;background-color:black;bottom:0;left:0;width:100%;height:50%;border-radius: 50%/0 0 80% 80%;transform: scale(-1, -1);}

.page {width:100%;height:500px;background-color:#ffffff;}