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 from relative to absolute, 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 margin on .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 the font-family again for .photopile figcaption.
my example uses 200x200 pixel thumbnails, but it works with other image sizes and aspect ratios too!

HTML:

CSS:

.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 0 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 1rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption, .popovers figcaption {
  font-family: /* set this to have it match the rest of the page */;
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 40%;
}
.photopile button:hover, .photopile button:focus { 
  z-index: 3;
  cursor:pointer;
}
.photopile button:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}
:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
}
.popovers figure:popover-open {
  display: block;
  background: white;
  width: 88vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 175%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  width: 80vmin;
  border: 4px rgb(0,0,0,0.55) inset;
}

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 .pageL and .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 border widths, border-radius, and .seam widths a little.