Below is the link to the example we built in class.
I’ve changed the example to demonstrate some fancy effects you can use in CSS, most notably the slide up-down effect on hover on wider screens. This is achieved by absolutely positioning the gallery-content section relative to the containing <a> tag. When the link is not interacted with the gallery-content section is displayed 100% below the link (the image). When the link is hovered over, the gallery-content section is set to bottom: 0 meaning the bottom edge should be 0px from the bottom edge of the container. The transition property tells the browser to animate this change over 0.5 seconds with easing.
Download slide-nav-gallery and see how it all works.