Screen Name and Editable text v2

[cssmfc]

This overlay is posted in Static category

Thirds type of overlay showing a bottom-left section animated by CSS.
Animates the horizontal blue divider from which in the top direction displays editable text and another animation for the bottom direction with editable text

Click to see the Online Demo .

The animation is running in infinite loop but shows up every 2 minutes.
To be able to edit/change text from editable sections, when mouse hover over the main wrapper the animation is set to pause ( visually defined by the orange top-bottom borders.

Moving mouse elsewhere, animation is resumed.

Dive into source markup code.

#mkzet { display: block;
  width: 100%;
  height: 220px;
  position: fixed;
  bottom: 70px;
  left:0;
  animation: MarketerBay 120s infinite;
  opacity:0; 
  transform: translateX(-70vw);
  border-top:3px solid rgba(255,153,0,0.0);
  border-bottom:3px solid rgba(255,153,0,0.0);
}

---

#mkzet:hover{ animation-play-state: paused;
    border-top:3px solid rgba(255,153,0,0.5);
    border-bottom:3px solid rgba(255,153,0,0.5);
    cursor:pointer;
}

---

#mkzet is the ID HTML element to wrap all the overlay's components. 120s means 2 minutes. If you decide to change to a higher value, make sure the animation @keyframes MarketerBay are adapted to new time interval.

#mkzet:hover is used to stop/pause the animation

#mkbaycontainer - the inner wrapper . All other elements are placed inside this HTML tag

.mktopline - class and HTML element used for Top animation / parent

.mktoptext - class and HTML element used for Top editable text , child of mktopline mentioned above

.mkbottomline - class and HTML element used for Bottom animation / parent

.mkbottomtext - class and HTML element used for Bottom editable text , child of mkbottomline mentioned above

.mkdivider - shows the blue line between top and bottom elements

.mkdivider:before - additional animated element, visible on top of the divider horizontal line.