Untitled

dabblet.css

body {
	font: 10pt verdana;
}

.hi {
	position: absolute;
	font-size: 10pt;
	line-height: 11pt;
	opacity: 0;
	background-image: linear-gradient(#F3F358, #FADB59);

}

.hi:hover {
	
	padding: 0.2em  0.3em  0.2em;
	margin:  -0.1em   -0.3em -0.2em; 
	font-size: 10pt;	

	border-radius: 5px;

	animation-name: hi;
    	animation-timing-function: default;
    	animation-duration: 1000ms;
}

@keyframes hi {
	0% {
		padding:  0.2em  0.3em  0.2em;
		margin:  -0.1em   -0.3em -0.2em; 
		font-size: 10pt;
		background-image: linear-gradient(#F3F358, #FADB59);
		box-shadow: 0px 0px 2px #DDD, inset 0px 0px 2px #DDD;
		opacity: 1;
	}
	3% {
		padding:  0.35em  0.3em  0.4em;
		margin:  -0.35em -0.3em -0.4em;
		font-size: 11pt;	
	}
	6% {	
		padding:  0.2em  0.3em  0.2em;
		margin:  -0.1em   -0.3em -0.2em; 
		font-size: 10pt;
	}
	50% {
		padding:  0.2em  0.3em  0.2em;
		margin:  -0.1em   -0.3em -0.2em; 
		font-size: 10pt;
		opacity: 1;
	}
	90% {
		background-image: linear-gradient(#F3F358, #FADB59);
		box-shadow: 0px 0px 2px #DDD, inset 0px 0px 2px #DDD;
		opacity: 0;
	}
}

dabblet.html

<br/>
<br/>
<br/>
Point your mouse on <span class="hi">me</span>me. Thank you )

settings.json

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