HTML, CSS and JavaScript playground

<center>
  <div id="contec">
    <span>About me</span><mark>Dante</mark>
       <p> Cake lemon drops soufflé gingerbread icing gingerbread cheesecake cheesecake. Icing cookie gummies I love I love cotton candy sugar plum. Icing chupa chups danish dragée chocolate bar cookie dessert I love.</p>
    </div>
  </div>
</center>

#contec:hover{
    overflow-x:hidden;
    overflow-y:scroll;
  }
  
  #contec:hover p, #contec:hover a {
    font-size: 0.75em;
    color: #fff;
    text-align: left;
    font-family: vcr;
    -webkit-animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both;
    animation: text-focus-in 1s cubic-bezier(.55, .085, .68, .53) both
  }
  
  mark{display:none;}
  
  #contec:hover mark  {
    font-weight: 700;
    font-size: 1.75em;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    -webkit-text-fill-color: #a0beac;
    z-index: 9999;
    display: inline;
  }

#contec:hover span{
    display: none;
  }
 
  #contec {
    -webkit-box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    box-shadow: 1px 1px 5px 0px rgba(160, 190, 172, 0.78);
    border: 2px solid #d3e1d4;
    background: #f7a2da;
    border-radius: 7px;
    width: 40%;
    height: 120px;
    transition: 0.6s ease;
    padding: 5px;
    cursor: help;
    overflow: scroll;
    overflow-x: hidden;
    display: inline-block;
    transition: transform 1s;
    z-index: 8;
    overflow:hidden;
  }

#contec:hover {
    background: #f7a2da;
    z-index: 9999;
    position: relative;
    width: 40%;
    height: 130px;
    transform: translate(13px, 48px) scale(1.8, 1.8);
  }

/* ---------------------------------------------- * 
Generated by Animista on 2022-4-19 11:37:1 * 
Licensed under FreeBSD License. * See http://animista.net/license for more info. *
 w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
  @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }

@keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
      filter: blur(12px);
      opacity: 0
    }

100% {
      -webkit-filter: blur(0);
      filter: blur(0);
      opacity: 1
    }
  }
</style>

Check out our Python playground!