From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Photo gallery, part 1

Photo gallery, part 1 - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Photo gallery, part 1

“

- [Chris] Hi, this is Chris Converse, and welcome to part one of this two part episode, where we'll be creating an interactive photo gallery with transitions, using only HTML and CSS. And this will build on some concepts from earlier episodes, including positioning, transitions, counting elements using the nth-of-type, and selecting elements using sibling combinators. And so here in part one, we're going to focus on getting our HTML ready by adding in some radio buttons and then hooking them together with the thumbnail images. So if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. So in the HTML file, the gallery is inside of a section element with a class of gallery. Scroll down here a little bit. Inside of the gallery are two main sections. There's a main element which contains all of the figures, which are the large graphics that you'll see here if you open this in a browser. And then there's a navigation element…

Contents