code snippets
new! border images have been moved to their own page!
image link text on hover
Example
this is adapted from the code i use on my home page!
- the text will be centered on any size image. you can adjust the text's position by adding something like
style="top: 28%;"to the<span>tag. - if you want the text to stay visible, delete
opacity: 0;. - if you want to move the image link anywhere on the page, change
.imgtxt's position fromrelativetoabsolute, then apply the positioning to the<a>tag. - keep the blank alt text. screenreaders will read what you've written in the
<span>tag.
HTML:
CSS:
interactive photo pile
no javascript, just CSS and the popover attribute to make a responsive pile of photos that you can view fullscreen by clicking on them.
- there are two divs:
"photopile"includes the (little) images that are displayed in an overlapping pile, and"popovers"includes the (big) images that get displayed fullscreen. - to make the images overlap more/less, adjust the
marginon.photopile figure. - the little captions will inherit the font of your
<button>elements, not the font you set for the<body>. if it doesn't match your page (and you want to), specify thefont-familyagain for.photopile figcaption. - my example uses 200x200 pixel thumbnails, but it works with other image sizes and aspect ratios too!
HTML:
CSS:
version 2: no full screen popovers, just the photo pile
HTML:
CSS:
simple notebook
this was an attempt at recreating my actual notebook without the use of images. CSS only!
- you could turn the
.pageLand.pageR<div>tags into<a href>tags to make the whole page link somewhere. link multiple books together and it's sort of like turning a page. - for larger books, you'll probably want to increase the
borderwidths,border-radius, and.seamwidths a little.