Cut tag - Open & Shut Book

[haptalaon]

I made a little open-and-shut book for journal cuts - the book opens on hover, stays open when the cut is open, then closes on hover and if you click it and the cut is closed it's shut. The cut text and icon are both centered. Like this!

Based on code bytropicsbear  here, updated from the original here byrise

You can download my book icons here - they're based on the open source twitter emoji [Closed Book / Open Book]. Please don't hotlink - download then re-upload to your own image hosting. What other before-and-after emoki could you use?

They are not pictures - they are in .svg format, a set of code instructions for displaying images. You can edit them in a dedicated svg editor, or in any program which edits text files (!). Use a .svg editor if you want to add symbols or change the design - or make your own pixel art - but if you just want to change the colour of the book, it's easy. Open the .svg source code in a text editor, then use find&replace to swap the color hex codes for the colours you want. Currently, the dark brown is #C1694F and the light brown is #D99E82.

Code under the cut!

/* CUSTOM CUT EXPANDER */ .cuttag+b { display:block; width:fit-content; margin-left:auto; margin-right:auto; } img[src*="collapse.svg"],img[src*="collapse.svg"]:hover,img[src*="expand.svg"], img[src*="collapse-end.svg"] { width: 0; height: 0; display:block; margin-left:auto; margin-right:auto; padding:1em 0.3em 0 0 !important; } img[src*="collapse.svg"] { background: transparent url(https://anemptyblissbeyondthisworld.neocities.org/homepage/1f4d4.svg) no-repeat scroll 0 0; } img[src*="collapse.svg"]:hover { background: transparent url(https://anemptyblissbeyondthisworld.neocities.org/homepage/1f4d6.svg) no-repeat scroll 0 0; } img[src*="expand.svg"], img[src*="collapse-end.svg"] { background: transparent url(https://anemptyblissbeyondthisworld.neocities.org/homepage/1f4d6.svg) no-repeat scroll 0 0; } img[src*="expand.svg"]:hover, img[src*="collapse-end.svg"]:hover { background: transparent url(https://anemptyblissbeyondthisworld.neocities.org/homepage/1f4d4.svg) no-repeat scroll 0 0; }

Comments

[goodbyebird]

Oh that's really neat!

[denise]

This is an AWESOME CSS trick!

[azurelunatic]

Oh, that is so cool!!!