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 (withsrc="https://picsum.photos/id/x/200/200"
wherex
is the picsum id of the photo)
- a
-
If you look at the style rules in picsum_gallery_advanced.html, you notice that these
span
's have the same size as their enclosingdiv
's, and they are absolutely positioned behind (z-index: -1
) the images within thediv
's
-
Use a
-
Change the
opacity
of all the images to0.25
. As this makes the images partially transparant, thespan
'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. Thespan
's (with the picsum id's) don't shine through the images anymore.
When your mouse leaves the image, its opacity is gradually decreased to0.25
again (also taking 50ms). Thespan
's (with the picsum id's) become visible through the images again.
// Picsum gallery (advanced) [jQuery]