Text Hover Animation Flip

HTML

PGgxPgogICAgPGEgaHJlZj0iaHR0cDovL3NsaXBzdW0uY29tLyI+U2FtdWVsIEwgSXBzdW08L2E+CjwvaDE+Cgo8cD5XYW50ZWQgdG8gc3BpY2UgdXAgdGhlIGxpbmtzIGFyb3VuZCA8YSBocmVmPSJodHRwOi8vaGFraW0uc2UiPm15IHNpdGU8L2E+IGFuZCBlbmRlZCB1cCByZS1jcmVhdGluZyB0aGlzIG92ZXItdGhlLXRvcCBGbGFzaCBjbGFzc2ljLjwvcD4KCjxwPkRvIHlvdSBzZWUgYW55IDxhIGhyZWY9Imh0dHA6Ly9wYnNraWRzLm9yZy90ZWxldHViYmllcy8iPlRlbGV0dWJiaWVzPC9hPiBpbiBoZXJlPyBEbyB5b3Ugc2VlIGEgc2xlbmRlciA8YSBocmVmPSJodHRwOi8vZW4ud2lraXBlZGlhLm9yZy93aWtpL1BsYXN0aWMiPnBsYXN0aWM8L2E+IHRhZyBjbGlwcGVkIHRvIG15IHNoaXJ0IHdpdGggbXkgbmFtZSBwcmludGVkIG9uIGl0PyBEbyB5b3Ugc2VlIGEgbGl0dGxlIEFzaWFuIGNoaWxkIHdpdGggYSBibGFuayBleHByZXNzaW9uIG9uIGhpcyBmYWNlIHNpdHRpbmcgb3V0c2lkZSBvbiBhIDxhIGhyZWY9Imh0dHA6Ly9lbi53aWtpcGVkaWEub3JnL3dpa2kvSGVsaWNvcHRlciI+bWVjaGFuaWNhbCBoZWxpY29wdGVyPC9hPnRoYXQgc2hha2VzIHdoZW4geW91IHB1dCBxdWFydGVycyBpbiBpdD8gTm8/IFdlbGwsIHRoYXQncyB3aGF0IHlvdSBzZWUgYXQgYSB0b3kgc3RvcmUuIEFuZCB5b3UgbXVzdCB0aGluayB5b3UncmUgaW4gYSB0b3kgc3RvcmUsIGJlY2F1c2UgeW91J3JlIGhlcmUgc2hvcHBpbmcgZm9yIGFuIGluZmFudCBuYW1lZCBKZWIuPC9wPgoKPHA+V2VsbCwgdGhlIHdheSB0aGV5IG1ha2Ugc2hvd3MgaXMsIHRoZXkgbWFrZSBvbmUgc2hvdy4gVGhhdCBzaG93J3MgY2FsbGVkIGEgPGEgaHJlZj0iaHR0cDovL2VuLndpa2lwZWRpYS5vcmcvd2lraS9UZWxldmlzaW9uX3BpbG90Ij5waWxvdDwvYT4uIFRoZW4gdGhleSBzaG93IHRoYXQgc2hvdyB0byB0aGUgcGVvcGxlIHdobyBtYWtlIHNob3dzLCBhbmQgb24gdGhlIHN0cmVuZ3RoIG9mIHRoYXQgb25lIHNob3cgdGhleSBkZWNpZGUgaWYgdGhleSdyZSBnb2luZyB0byBtYWtlIG1vcmUgc2hvd3MuIFNvbWUgcGlsb3RzIGdldCBwaWNrZWQgYW5kIGJlY29tZSA8YSBocmVmPSJodHRwOi8vZW4ud2lraXBlZGlhLm9yZy93aWtpL1RlbGV2aXNpb25fcHJvZ3JhbSI+dGVsZXZpc2lvbiBwcm9ncmFtczwvYT4uIFNvbWUgZG9uJ3QsIGJlY29tZSBub3RoaW5nLiBTaGUgc3RhcnJlZCBpbiBvbmUgb2YgdGhlIG9uZXMgdGhhdCBiZWNhbWUgbm90aGluZy48L3A+Cg==

CSS

Ym9keSB7CiAgICBmb250LWZhbWlseTogc2Fucy1zZXJpZjsKICAgIGJhY2tncm91bmQ6ICMzMzM7CiAgICBjb2xvcjogI2VlZTsKfQoKYSB7CiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7CiAgICBjb2xvcjogaHNsKDIwNiwgODAlLCA1MCUpOwp9Cgoucm9sbCB7CiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICBvdmVyZmxvdzogaGlkZGVuOwoKICAgIHZlcnRpY2FsLWFsaWduOiB0b3A7CgogICAgLXdlYmtpdC1wZXJzcGVjdGl2ZTogNDAwcHg7CiAgICAgICAtbW96LXBlcnNwZWN0aXZlOiA0MDBweDsKCiAgICAtd2Via2l0LXBlcnNwZWN0aXZlLW9yaWdpbjogNTAlIDUwJTsKICAgICAgIC1tb3otcGVyc3BlY3RpdmUtb3JpZ2luOiA1MCUgNTAlOwp9Ci5yb2xsIHNwYW4gewogICAgZGlzcGxheTogYmxvY2s7CiAgICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgICBwYWRkaW5nOiAwIDJweDsKCiAgICAtd2Via2l0LXRyYW5zaXRpb246IGFsbCA0MDBtcyBlYXNlOwogICAgICAgLW1vei10cmFuc2l0aW9uOiBhbGwgNDAwbXMgZWFzZTsKICAgIAogICAgLXdlYmtpdC10cmFuc2Zvcm0tb3JpZ2luOiA1MCUgMCU7CiAgICAgICAtbW96LXRyYW5zZm9ybS1vcmlnaW46IDUwJSAwJTsKICAgIAogICAgLXdlYmtpdC10cmFuc2Zvcm0tc3R5bGU6IHByZXNlcnZlLTNkOwogICAgICAgLW1vei10cmFuc2Zvcm0tc3R5bGU6IHByZXNlcnZlLTNkOwp9CiAgICAucm9sbDpob3ZlciBzcGFuIHsKICAgICAgICBiYWNrZ3JvdW5kOiAjMTExOwoKICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlM2QoIDBweCwgMHB4LCAtMzBweCApIHJvdGF0ZVgoIDkwZGVnICk7CiAgICAgICAgICAgLW1vei10cmFuc2Zvcm06IHRyYW5zbGF0ZTNkKCAwcHgsIDBweCwgLTMwcHggKSByb3RhdGVYKCA5MGRlZyApOwogICAgfQoucm9sbCBzcGFuOmFmdGVyIHsKICAgIGNvbnRlbnQ6IGF0dHIoZGF0YS10aXRsZSk7CgogICAgZGlzcGxheTogYmxvY2s7CiAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICBsZWZ0OiAwOwogICAgdG9wOiAwOwogICAgcGFkZGluZzogMCAycHg7CgogICAgY29sb3I6ICNmZmY7CiAgICBiYWNrZ3JvdW5kOiBoc2woMjA2LCA4MCUsIDMwJSk7CgogICAgLXdlYmtpdC10cmFuc2Zvcm0tb3JpZ2luOiA1MCUgMCU7CiAgICAgICAtbW96LXRyYW5zZm9ybS1vcmlnaW46IDUwJSAwJTsKCiAgICAtd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlM2QoIDBweCwgMTA1JSwgMHB4ICkgcm90YXRlWCggLTkwZGVnICk7CiAgICAgICAtbW96LXRyYW5zZm9ybTogdHJhbnNsYXRlM2QoIDBweCwgMTA1JSwgMHB4ICkgcm90YXRlWCggLTkwZGVnICk7Cn0=

JavaScript

dmFyIHN1cHBvcnRzM0RUcmFuc2Zvcm1zID0gIGRvY3VtZW50LmJvZHkuc3R5bGVbJ3dlYmtpdFBlcnNwZWN0aXZlJ10gIT09IHVuZGVmaW5lZCB8fCAKICAgICAgICAgICAgICAgICAgICAgICAgICAgIGRvY3VtZW50LmJvZHkuc3R5bGVbJ01velBlcnNwZWN0aXZlJ10gIT09IHVuZGVmaW5lZDsKCmZ1bmN0aW9uIGxpbmtpZnkoIHNlbGVjdG9yICkgewogICAgaWYoIHN1cHBvcnRzM0RUcmFuc2Zvcm1zICkgewogICAgICAgIAogICAgICAgIHZhciBub2RlcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoIHNlbGVjdG9yICk7CgogICAgICAgIGZvciggdmFyIGkgPSAwLCBsZW4gPSBub2Rlcy5sZW5ndGg7IGkgPCBsZW47IGkrKyApIHsKICAgICAgICAgICAgdmFyIG5vZGUgPSBub2Rlc1tpXTsKCiAgICAgICAgICAgIGlmKCAhbm9kZS5jbGFzc05hbWUgfHwgIW5vZGUuY2xhc3NOYW1lLm1hdGNoKCAvcm9sbC9nICkgKSB7CiAgICAgICAgICAgICAgICBub2RlLmNsYXNzTmFtZSArPSAnIHJvbGwnOwogICAgICAgICAgICAgICAgbm9kZS5pbm5lckhUTUwgPSAnPHNwYW4gZGF0YS10aXRsZT0iJysgbm9kZS50ZXh0ICsnIj4nICsgbm9kZS5pbm5lckhUTUwgKyAnPC9zcGFuPic7CiAgICAgICAgICAgIH0KICAgICAgICB9OwogICAgfQp9CgpsaW5raWZ5KCAnYScgKTs=

Text Hover Animation Flip

HTML

CSS

JavaScript

Please Whitelist JSFiddle in your content blocker.

Join the 4+ million users, and keep the JSFiddle dream alive.

Ad-free

Use pre-released features

Fiddle collections

Private collections and fiddles

Console