Untitled

dabblet.css

* {
  font: 10pt arial;
}

.parent {
  width: 100px;
  overflow: hidden;
  position: relative;
}

.inner {
  white-space: nowrap;
  transition-properties: margin-left;
  transition-duration: 2s;
  margin-left: 0;
}

.inner:hover {
  margin-left: -140px;
}

.fade {
  background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,255));
  position: absolute;
  right: 0;
  width: 20px;
  height: 100%;
}

dabblet.html

<div class="parent">
  <div class="fade"></div>
  <div class="inner">Very very long string for very long people</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}