Fadeout and marquee

dabblet.css

/*
Fadeout and marquee
*/
.fadeout-text {
  overflow: hidden;
  width: 130px;
  /* Fallback solution for browsers that 
     doesn't support the next set of rules. */
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen {
.fadeout-text {
  text-overflow: clip;
  position: relative;
}
.fadeout-text:hover span {
  display: inline-block;
  overflow-x: -webkit-marquee;
}
.fadeout-text::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 20px;
  background-image: linear-gradient(left,rgba(255, 255, 255, 0),white);
}

dabblet.html

<div class="fadeout-text"><span>Stockholm, Uppland, Sweden</span></div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}