Picsum photo gallery (advanced)
- Use a loop to add the first 50 picsum photos to
div#gallery in the following way: - Use a
div per image, enclosing - a
span (with the picsum id of the photo as text) - an
img tag (with src="https://picsum.photos/id/x/200/200" where x is the picsum id of the photo)
- If you look at the style rules in picsum_gallery_advanced.html, you notice that these
span's have the same size as their enclosing div's, and they are absolutely positioned behind (z-index: -1) the images within the div's
- Change the
opacity of all the images to 0.25. As this makes the images partially transparant, the span's (with the picsum id's) are now visible through the images. - When you hover over an image, its opacity is gradually (over a time period of 50ms) increased to
1, making the image fully opaque. The span's (with the picsum id's) don't shine through the images anymore.
When your mouse leaves the image, its opacity is gradually decreased to 0.25 again (also taking 50ms). The span's (with the picsum id's) become visible through the images again.