<div class="title">sky sun</div>
<div class="sky">
</div>
<div class="behind">
</div>
<div class="sun">
  <div class="text1">gm<div>
</div>

index.html

div{
    align-items: center;
  }

  .sky {
    position: absolute;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    display: flex;
    height: 40%;
    width: 40%;
    margin-left: 30vw;
    background: linear-gradient(180deg, #5489D9 0%, rgba(255, 244, 231, 0.85) 100%);
  }

  .behind {
    display: flex;
    height: 40vh;
    max-width: 40%;
    border: 3px solid black;
    margin: 1vw;
    align-items: center;
    margin-left: 30vw;
    transition-duration: 600ms;
    transition-timing-function: ease;
    transition-properties: border-radius;
  }

  .behind:hover {
    border-radius: 2rem;
  }

  .sun {
    height: 24vh;
    max-width: 20vw;
    border: 3px solid black;
    border-radius: 300px;
    margin: 1vw;
    margin-left: 40vw;
  }

  .title {
    text-align: center;
    margin: 2vw;
  }

  .text1 {
    text-align: center;
    margin: 2vw;
    margin-top: 10vw;
  }

index.css

function show(){
    console.log('show');
    $('.sky').fadeIn('slow',function(){

       setTimeout(function(){
          hide();
       }, 300);
    });
  }

  function hide(){
    $('.sky').fadeOut();
    console.log('hide');
  }


  $('.sun').click(function(){
    show();
  });

index.js