dziudek/dabblet.css

## dabblet.css
/**
 * Gradient :hover
 */

#test {
	position: relative;
	width: 640px;
	height: 240px;
	overflow: hidden;
}

#test:before {
	position: absolute;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* W3C */;
	content: "";
	top:-100%;
	left: 0%;
	width: 100%;
	height: 200%;
	z-index: 1;
	transition: top 1s ease-out;
}

#test:hover:before {
	top: 100%;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="test"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAj0AAADMCAIAAAAXooXDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAaDklEQVR4Ae2dSXAc13nHX88MNmIlNnGBuUgRI9mUbEWLbVUsKolc5bJcqZRdjnxMJVHKOaR0cKpSFfmQQ3zIIQdXDnHKdiJnK8lZfIjl+BDFEsvRYllJJFKWQloSKQHcQAAECBAzAGY6f2CIwQAzgxnMTKPfe/PrmiJ6Xr9+/X2/77H/87buIAxDwwYBCEAAAhBwhEDCETsxEwIQgAAEILBKAN2iHkAAAhCAgEsE0C2XooWtEIAABCCAblEHIAABCEDAJQLolkvRwlYIQAACEEC3qAMQgAAEIOASAXTLpWhhKwQgAAEIoFvUAQhAAAIQcIkAuuVStLAVAhCAAATQLeoABCAAAQi4RADdcila2AoBCEAAAugWdQACEIAABFwigG65FC1shQAEIAABdIs6AAEIQAACLhFAt1yKFrZCAAIQgAC6RR2AAAQgAAGXCKBbLkULWyEAAQhAAN2iDkAAAhCAgEsE0C2XooWtEIAABCCAblEHIAABCEDAJQLolkvRwlYIQAACEEC3qAMQgAAEIOASAXTLpWhhKwQgAAEIoFvUAQhAAAIQcIkAuuVStLAVAhCAAATQLeoABCAAAQi4RADdcila2AoBCEAAAugWdQACEIAABFwikLLB2GzOvHkh1Of8VG4uHegrm8cE2lNhf5c5OJD4yIFAnyS/nTwONq5BIAICQRiGERS7gyJPXwifPZWdng92cA5ZfSEw2BM+ejx5/CDR9yWi+AGB6AnEqVu50PzwdO6FMzELZ/SQuUIVAieOBZ85nkggXlU4cRgCEFglEGcfDaJFHcwT0G8XVQZoQAACEKiFQGy6dWoipKVVS4RaJI8qg6pEiziLmxCAQCME4tEtzbz4t9ezjdjNuf4RUJVgSo5/YcUjCDSdQDy69cZ4OLvIaEbTo+l2gaoSqhhu+4D1EIBA9ATi0S1NeY/eNa7gHgEqhnsxw2II7DqBeHRrfIZB+F0PtQsXpGK4ECVshEDMBOJZd6zFxVX9HukN7z+SPDocDnYnOlMmlax6BhmsI7CSNekVM72Qe+9q8Oq57OT1KnGvpWJY5yQGQQACu0sgHt3afvhd63i0mueh24Ng9S5X5U63u7i42s4I6NdGjz4diUOD5qHbUyfPrs5317q9Stv2FaPSWaRDAAItRSCefsLtEf/qnQktRF0Tre0zctQlAgqowqrgumQ0tkIAAvYRsO4mMtobPnIHbSz7akqTLFJwFeImFUYxEIBAKxKwTrfuPZykpeVxTVRwFWKPHcQ1CEAgagLW6datI/wYjzroMZd/eIgQxxwCLg8BpwlYp1tD3daZ5HSALTR+pJcQWxgWTIKAMwSsu4Ps6XCGHYbWR6Czrb7zOAsCEIDAKgHrdIspGd5XzJR1lc575DgIAa8IcAvxKpw4AwEIQMB7AuiW9yHGQQhAAAJeEUC3vAonzkAAAhDwngC65X2IcRACEICAVwTQLa/CiTMQgAAEvCeAbnkfYhyEAAQg4BUBdMurcOIMBCAAAe8JoFvehxgHIQABCHhFAN3yKpw4AwEIQMB7AuiW9yHGQQhAAAJeEUC3vAonzkAAAhDwngC65X2IcRACEICAVwTQLa/CiTMQgAAEvCeAbnkfYhyEAAQg4BUBdMurcOIMBCAAAe8JpLz3EAd9JhAum4tPmyvPmoUzJrvos6ct61uyy3QfM6OPmv1fMgGvHG3ZerDJcXRrEw6+uERg6bI5/WUz/7ZLNmPrTgno58jc66ufS/9qjn/DtN+y0wLI7x8B+gn9i2lreKSWFqLVGqG+6aV+oCjiuaWWchpnyxJAt8piIdF6AhefoaVlfZCabaCk69J3m10o5blHAN1yL2ZYvErgyvfh0IoEiHsrRn2rz+jWViJ8d4PA9Z+5YSdWNpfAAnFvLlAnS2NehpNhw2ij8a2ym6acHfiSpp+Fe24PknvKZiHRWgJh9kZw4+zqBNELT5cPcbZC3K11CcMiIIBuRQCVIuMioMlmd33DdN+h6wdx2cB1GyCw+lOj96Orn32fN6e+bDRllA0CJQToJyxBQoKjBNTSWhctRz3A7A0C+vGhaCZZsLWBhL0CAXSrgIIdxwkceCzf0nLcDcxfJyDp2vfY+hf+QmCDALq1wYI9twmMfs5t+7G+lAAxLWVCijHoFrXAFwI9H/bFE/xYJ9B95/oefyGwQQDd2mDBntsEeHid2/ErZ32ivVwqaa1OAN1q9RqA/xCAAATcIoBuuRUvrIUABCDQ6gTQrVavAfgPAQhAwC0CrDt2K15YCwEI1Esgu7L84gsr//OT8OJ4uGTjc+WD9vZg/1jqngfaHjxhktycKwYaNBXRcAACEPCGQDh7Lf3tr+cmxm32SGoann936fy7K6/+uPN3ngj6B2y2Nkbb6CeMET6XhgAEdoVAdsV+0SoGIX1Nf+vrZmWlOJH9AgF0q4CCHQhAwE8Cyy+dtLylVco9d2F8+eWTpemkiAC6RTWAAAQ8J7Dy36+46KGjZu8Casa3dgEyl4CALQRyuVw6nV5cXNS/fX19vb29tlgWpR258fNRFh9V2Y6aHRWOonLRrSIY7ELARwJhGBa0amlpqXNt27Nnj9SrRXTLZLNbAtv959/ckmLD14WvPL7JjBKzNx1t4S/oVgsHH9f9JSCtymQy+XaVdjo6OqRWg4OD2gmC1XeTZbPZ8XGrJ9f5Gxw8a5QAutUoQc6HgD0EJFGFplVbW1tXV9fAwIAUK69VxXYmk8lEIqHmV3s7zwAsBsO+AwTQLQeChIkQ2IaAtKegVVIjaZUGrkZHRyVL25ylQ8qpBhm6tT0ljlpIAN2yMCiYBIEqBJaXl/NaJeGRPkmBenp6hoeHpVtVziw6rLPm5+f7+/uL0tiFgAME0C0HgoSJEBABjUhJpfKbvkp1NLdiaGhoR1pVTFL9h1evXi1OYR8CThBAt5wIE0a2KAFpVaFdpSns0iptGrLS2FXjRCR42vKzNhovjRIgsGsE0K1dQ82FIFATgcISKzWtpFtqFUmrNGQVxUCUSpYuapJhTZaRCQJ2EEC37IgDVrQ2gcISK2mVxq7yWjUyMhK1oki35ubmGOJq7drnnvfolnsxw2I/CJQusZKKaLyqsMSqfjeXLpup5036/TDRGXQdMYMPm1T552JIIK9cuSJLSifK1391zoRAxATQrYgBUzwENhMoLAdWB526/qRVlZZYbT6v5m+Zi2bi70y4rBOC3JK5/ka4eC4Y+22T7C4tQnMRNVSmmfRRN+xKL00KBOomgG7VjY4TIVArAQmDOgDzMyykE2rl1LjEqtYLFOeb+o+8aBXSgpU5c+0lM/RIIaV4R8Ip29CtYibsW04A3bI8QJjnKgENUxW0StP2pFVaYqUhq6rLgRtzODSLH5QpIT1eJnEtSbp17do1tfkqZSAdArYRQLdsiwj2OExgZWWloFUaMZJWNbjEaucsApNImdxqJ+GmLai4HllGquuSIa5NuPhiNwF0y+74YJ07BCYmJqRbar5o27t3byoV03+uPcfM/JtbsXUd25qy/l36qmE2SZcEbD2NvxCwmkBM/7WsZoJxEKiHgDoD1dvW3V1m+kM9xdV9zvAjJn3BrMxsFNB9hxm4f+NryZ6EVs1EdKsEDAmWEkC3LA0MZjlHQHd/zbyIX7eSPebQ75lrr5nM+yZoM92/aHru0NTCbXhKsWZmZtRG3CYPhyBgDwF0y55YYInbBKRbWgtlhQ9Byuz9uDH61LRJtzTjkSGummCRyQICVd50YIGFmAABNwholEiPZdLmhrlFVmqIS/Pg1VgsSmMXAvYSQLfsjQ2WOUdADRdH7/6yXENczgHH4NYkgG61ZtzxOhIC+QkOkRQdcaHuWh4xGIq3kQC6ZWNUsMlRAu62WtRPqIXSehS9o+Qxu6UIoFstFW6cjZaAhrh063d0iMvdTs5og0rp9hFAt+yLCRa5TMDdDjd3G4su1xdsr4cAulUPNc6BQCUC7uqWLHd0UkmlWJDuKwF0y9fI4lc8BNxttTDEFU+N4ao7J4Bu7ZwZZ0CgMgG9pkQH9aDCylnsPeKu6NrLFMsiIIBuRQCVIlubgNNdhaziau3K64b36JYbccJKhwi422phiMuhatbKpqJbrRx9fI+EQDPv/pnJSEysUKi7j6qq4BDJfhJAt/yMK17FSEBv3tIT/7SMtwk2XPxHM/2jJpRTcxHuNhZrdpGMzhNAt5wPIQ5YSKA5d/+lyyY7b2ZeNJe/Z8JdmujRzMaihYHBJC8I8B4TL8KIE5YR0N1/YWGhr6+vIbtuvHvz9PmfmZVZs++LJhn5Syll+ezsbENmc/LuEphOp380ce69udlMw+8i6Egmj/b1/8rBI4N2v/ya9tbuVjGu1hoEmtNqKeiWoKUnzMRTZmlqB/xunDXL13aQfy2r5vHrUVWOzuPfqbMe5J9KL/7NW2+8PTPduGiJhgpRUSpQxdoMh/aWzdHBNlcJJNc2vYxRMx3q9EEdg+kPNp0rEZp4yuz7vOk6uim97JcwG07+MMilzdCnTd/HymaplCjR1Wz43t7eShlIt4fA8xPn09nqfch/cPe9fe0debPnljJ/8cZr27igAlXsF27Ta7It3dAtSwODWa4TyA9x1a9bi+dNWPIKSunQxafNyGdN70er8Jk/HazMreaZfNbcOGNGHq29jzHfWES3qhC247C6B2sxZHuhKi3hXbv7iuknLA0ZKRBoAoFGuwpvvFPeiDBnrny/2iTD0Ez/18bpC2fNB980C/+3kbLtXr69tW0WDtpCoCndg6XOLOVKfjOVZoovhfZWfOy5stcE1N66evVq/S4urk/KKFuEJhkuz5jRXzdBuf/C82+ZlZlN52UXzKV/Xm2lDX/aJG72F23KUPRF8/j1TfP488+sKjrCrqUEnrzvwSZa9rWfvtjE0qIoivZWFFQpEwImP8SVyWTqYaEuvqpTMCROF/7eSJBKN6la2e3662p4hYvvlz1YnNhoY7G4LPYh0GwC6FaziVIeBNYJ1N/hVjyTcL20Mn/zkwy3PFND0wi18KvStjIbSO2mniszeFZ0Sv2WFxXCLgQiIoBuRQSWYiFg6m+1bN9JWIxWkwwv/K1ZfG8jrVJjayNHaK69bD74tlm6spG2ea8566Y3l8k3CDSLALrVLJKUA4GtBHT315sYwzDceqDK99DcOFclS/Hh/CTDuf9VWqhZiOnx4oMV95cnzfhfm2sv6aTSPBriSiQSmsdfeogUCMROoNygbuxGYQAEvCCgW7+mNmiISwK2A4fU+5fb4apPTTLUfPfl6SBzcQcX0jz7qf80mm2o+R1tA1tOzDcW65/Hv6U4vkKgeQRobzWPJSVBoIRAPV2Fi+dKiqktQY2nOs7V6ubxbxlN2di8McS1mQffLCKAblkUDEzxj0A9d/8aJ2U0EVYus7om7NI/Fc9OzHdyNvEiFAWBZhFAt5pFknIgUIaA7v7qJ9zBEJckJDNRpqCok4I2k1s2C2cK1yk8qqqQwg4ELCFg3fiWxogDS9hgRjQEVnLRlGtlqXoRl4aINDtDDa+aDFRHnwardmfTmuXOg6briOk6ZDoOmiC55bL5xiJDXFuw8DV2Atbp1o2M6a6ynD92aBjQEIF0M96n2JAFu3uy7v470K1Kj3dqls0SJ2lV5+Gw63CgnbKP21i/lhqL169f7+/vX0/gLwSsIGCdbk0v5Lo76L20onJEZMTk9d1qT0TkwA6LlW5NT0/v3bu3pvOKV2LVdEINmYKE6Thws13V+aG8Vm3Tq6GXmOh58Pkt/8ynGq5BFgjsHgHrdOudyeBDg7vnP1fafQLnp3TPLLNmaPct2Z0rdnR0aCGUhrjUZ1jlikvTdbwxq3yZq1q133QdNp2HVj+JtvLZ1lOz2WxeqPILzqS12gYHB9GtdUL8tYiAdbr12vnsiWOpqv/BLUKIKTshoDW4CnFLDWJKriRdNXUV1v6YjPLMgzWtOrTatFK7KlHl1V96P2RBq6RbEip1DA4MDPA43fJ0SbWGgHW6deV68Nzb4SN3Vvtlag1BDNkRAQVXId7RKR5kliRIIfRvFV/q0S1p1b7ViRX5plW1Z71Lq6SgMkb/6onvEipZ1dfXx+SLKqHhsE0ErNMtwXnurVxbMvHQ7dW7VWwiiS1VCKildfJsqOBWyefjYcnD1NRUFc80jVBPaappC0z76JpWrU0FTFR5GIe6KKVS2iRX6rFU409aNTw8rJ2arkYmCFhGIB7d6kiFmZWKP7pzofnBqdyr58L7jySPDoeD3YnONpNiroZlVacWczTlXbMHNdfmvavBq+eyk9VaWklPoyyFUONGbR09+akStzA9HuS2fR5g+/Da3Ar1AR4yySpNN2mV1o3ltUo7ak5JqzReJUv4PVgpBKS7QiAe3ertNJn5Koh0j5N6rWWy+s2bVdzg8E0CNS3M6+v0c76GpEJNLqnInj17ttYIvWpLzSwt2yo7k7B9aK0DcK1dlezeem7J94JW6VoappJWabxKl0arSlCR4DCBeHRrf3/i6ryfdyiH64IFpo/trdgcscC6hkyQhKibbqtuZS6Ziafyr8La6H9I7TV7JFT6HDY1aJW6/vLtKv2rh1zoQhqvGh0d3aZt15AnnAyBuAnEo1sfORCcmkC34g6+fddXxbDPqOZYpEbP5OTkprLUK3jpezff37iqVYfXmlaHTap3U7ZyX9TrmNcqaaH0SVrV09OjISvpVrnspEHAKwLx6NbdY8G/nw5nF729SXlVR3bLmf6u8K4xb6uEBpY011zbhrTo8e1dY6brl1flKtVXFbPOlUrlN2WWVqn1xhKrqtzI4B+BeHRLw++fuzv5D6+04tQy/+pQszxSlfB79k1+iKu7e32YavBEVXTSqkK7StM6pFXaWGJVlRsZ/CYQj26JqZpc4zPBC2foLfS7gtXq3YljgapErbndzCfdUmtpQ7cqeFFYYqXM0i2dpY0lVhVokdyKBGLTLcH+zPHEUjb30jtIVyvWvGKfP3FboMpQnOLlvppKc3NzZV3LL7GSUKl1pXkWea0aGRlhiVVZXI0nLnzl8cYLoYS4CMSpW4nA/MbHEreNhD84nZ2e9/y3dlwBtvy6gz3hZ48n7zrYEtHXIiq1pQpDXPklVnmt0vx1SZTkiiVWltdYzLOBQJy6lfdf96wP70+9MR6+eSEcn8nNpYMsw142VI3IbNDoptZpacq7Zg+qb9DXtcZl+eWbXJoBmJcrlliVpUQiBLYnEL9uyT7due45FOhjjP+dRdvHg6N+E5Buzc7O6l+WWHkQ6OQdxzse+y05knnmqezbpz3wyBUX0AlXIoWdPhDo7e0dGxsbGhrSFHbWBe9eRKNZ1ibRCvr69cmrV9Pd0auym16mHwWiW37EES8gAIGKBBJjhysea8qBaMZng/1jTbHOv0LQLf9iikcQgMAmAql7Htj0vUlfMt/9Tnh9Npy9lnnmO00qclMxEZm96RpufrFifMtNdDet/qN/seKxv3/2BR7w43Q9wvgICbR98sTKT36cuzDe3Gtk3zp140/+sLllFkpL7B+T2YWv7BQToL1VTIN9CEDARwKpVOfvPpE46Ey3W+LAWOfjT5gU7YrytREu5bmQCgEI+EQg6B/oeuLJ5RdfWHntpdzli2Zp21edxeV5e3vilv2pez/Z9uAJk+TmXDEMoKmIhgMQgIBXBJKptk/9mj5eOdWSztBP2JJhx2kIQAACzhKgveVs6DB8C4GTd25J4CsEIOAlAdpbXoYVpyAAAQh4SwDd8ja0OAYBCEDASwLolpdhxSkIQAAC3hJAt7wNLY5BAAIQ8JIAuuVlWHEKAhCAgLcEmE/obWhxzDECgw+Z2//UdIw00+zMpDn7VTN9spllUpZ9BL720xftMypCi9CtCOFSdIQEHnorwsK9KVoqePyvvPEGRyCQJ4BuURN2iwDrq7Yn/fGTTW5s5S+XuWpe+dT2V27poy3zA+jhg4fuv2X/q5cvPj/xvusRZ3zL9Qhivy8Efv5VI41p7rZ02fz8yeYWSWlWEeio+ZWYn9h3sD2RlHTVYr9y1pItrjy0t+Ii33rXDdpMuNx6btfs8dRJM0XDqGZcTcmYcP6H+9G+/rdnpmuB8fKliQfW2lu1ZL61v7+WbHHlQbfiIt961x2418y83Hpu47HFBPrus9i4mkx7+ODhc3Nz6exK1dzqHqyxh7AzmVKxVQuMMUMQhmGMl7f20n/5Qu7cVQ/JHBkOfv9ETL8xMxfNmT82116j1WVttW8hwxIp03+fOaYJnAdd93oqvfj8xPl352aXso2+w7Y9mby1r1+iNdTZZTMWdKt8dCx5i3F54xpL5c3IjfHjbAhAIGYCMf30jtnr6pdPegomEVT3nRwQgAAEbCbg6e25YeRHh/28waufsGE2FAABCEAgTgLoVnn6X/ylxC+MBj61uuSLPPrNe4l4+YiTCgEIuEKA8S1XIoWdEIAABCCwSoBf39QDCEAAAhBwiQC65VK0sBUCEIAABNAt6gAEIAABCLhEAN1yKVrYCgEIQAAC6BZ1AAIQgAAEXCKAbrkULWyFAAQgAAF0izoAAQhAAAIuEUC3XIoWtkIAAhCAALpFHYAABCAAAZcIoFsuRQtbIQABCEAA3aIOQAACEICASwTQLZeiha0QgAAEIIBuUQcgAAEIQMAlAuiWS9HCVghAAAIQQLeoAxCAAAQg4BIBdMulaGErBCAAAQigW9QBCEAAAhBwiQC65VK0sBUCEIAABNAt6gAEIAABCLhEAN1yKVrYCgEIQAAC6BZ1AAIQgAAEXCKAbrkULWyFAAQgAAF0izoAAQhAAAIuEUC3XIoWtkIAAhCAALpFHYAABCAAAZcIoFsuRQtbIQABCEAA3aIOQAACEICASwTQLZeiha0QgAAEIIBuUQcgAAEIQMAlAuiWS9HCVghAAAIQ+H9ut4/cMCm9KgAAAABJRU5ErkJggg==" /></div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Gradient :hover
	*/

	#test {
	position: relative;
	width: 640px;
	height: 240px;
	overflow: hidden;
	}

	#test:before {
	position: absolute;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); /* W3C */;
	content: "";
	top:-100%;
	left: 0%;
	width: 100%;
	height: 200%;
	z-index: 1;
	transition: top 1s ease-out;
	}

	#test:hover:before {
	top: 100%;
	}