From the course: Creating Web Media

Unlock this course with a free trial

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

Image zoom to point of interest

Image zoom to point of interest - CSS Tutorial

From the course: Creating Web Media

Start my 1-month free trial Buy for my team

Image zoom to point of interest

“

- [Narrator] Hi, this is Chris Converse. And in this episode, we'll create an interactive graphic by setting different scale and position properties of a background image, allowing us to zoom to different points of interest within an image. So if you'd like to follow along with me, download the exercise files. And we'll begin by opening the HTML file in a text editor. Now, when you have the HTML file open, in the body area, down inside of an article element, you'll see we have two divs inside of a figure element. We have a div with an id of zoom_image and another div with an id of zoom_links. Now, on the div with an id of zoom_image, we have a data-position attribute with a value of default. And then down here inside of the div with the id of zoom_links, we have a series of anchor links that also have a data-position attribute, and each of these has a different value inside. So we have default, raisins, lemons, and ginger. Now if we continue down, we have a JavaScript in the page. And…

Contents