Styling the Photos & Text

Exercise Preview

Exercise Overview

Throughout this comprehensive exercise series, you'll master the art of creating image-rich, visually compelling webpages that leverage the full power of modern CSS capabilities. You'll construct an elegant, fully responsive design where every element—images, videos, and text—adapts seamlessly to any viewport size. Beyond basic responsive design, you'll explore advanced CSS animation techniques including zoom effects, panning transitions, and sophisticated scroll-based interactions.

This hands-on approach emphasizes practical implementation of media queries to ensure your content displays beautifully across all devices, from mobile phones to ultra-wide desktop monitors. The techniques you'll learn represent current industry best practices for creating engaging, professional web experiences that perform well in 2026's diverse browser landscape.

In this foundational exercise, you'll begin by implementing fixed background photo sections with overlaid scrolling text—a popular technique that creates depth and visual interest while maintaining excellent user experience across devices.

Getting Started

Before diving into the code, let's examine the completed webpage to understand the full scope of CSS features we'll be implementing. This preview will help you visualize the end goal and appreciate the sophisticated interactions we're building.

1. Launch a modern web browser. For optimal performance and to see all effects, use Chrome, Safari, Firefox, or Edge. Note that Internet Explorer 9 and earlier versions lack support for many CSS3 features we'll be implementing.

2. Open a file using Command–O (Mac) or Control–O (Windows).

3. Navigate to Desktop > Class Files > Responsive CSS3 Scrolling Effects > Hawaii Done and double-click index.html to open it.

   We'll conduct a thorough analysis of the finished webpage's key features and interactions.

4. Maximize your browser window to view the full desktop layout, then systematically explore the design elements.

5. Scroll through the entire site and observe these advanced CSS implementations:

   • Parallax scrolling effects: Notice how background images remain fixed while content scrolls over them, creating depth and visual engagement.
   • Animated panorama: The Mt. Haleakala section demonstrates CSS-based image panning that creates a cinematic experience.
   • Typography integration: Custom web fonts are seamlessly integrated with subtle shadow effects that enhance readability over images.
   • Interactive video elements: The embedded YouTube video features hover-triggered scaling effects that draw user attention.
   • Responsive behavior: Resize your browser window to observe how all elements—text, images, spacing, and layouts—adapt fluidly to different viewport dimensions. This responsive approach ensures consistent user experience across all devices.

   These represent the core CSS3 features that modern web professionals rely on for creating compelling user experiences.

6. Now let's begin development! Launch your preferred code editor. Popular professional options include Sublime Text, Atom, Visual Studio Code, or Dreamweaver.

7. Open the starter file: Desktop > Class Files > Responsive CSS3 Scrolling Effects > Hawaii > index.html. Ensure you're working in the Hawaii folder, not the completed Done folders.

   If your editor supports project folders (like Sublime Text or Visual Studio Code), we recommend opening the entire Hawaii folder for better file management.

8. Examine the index.html file structure. This contains the semantic HTML markup and foundational layout for our Hawaii webpage. On line 8, note the critical viewport meta tag:

   <meta name="viewport" content="width=device-width, initial-scale=1">

   This meta tag is essential for responsive design—it instructs mobile browsers to respect your CSS media queries and display content at appropriate scales rather than defaulting to desktop zoom levels.

9. Let's preview the current state in your browser. Open a web browser and press Command–O (Mac) or Control–O (Windows).

10. Navigate to Responsive CSS3 Scrolling Effects > Hawaii and double-click index.html.

11. Test the existing responsive behavior by resizing your window. Notice how the main content column maintains a maximum width of 1000 pixels—this prevents text lines from becoming uncomfortably long on wide screens while allowing content to contract gracefully on smaller displays. Elements like the pull quote already demonstrate percentage-based responsive behavior.

    Currently, the page contains only text content with placeholder sections where we'll implement our photo panorama and image stack features.

Coding the Image Styles

To achieve the advanced visual effects we demonstrated in the preview—including animations and scroll-based interactions—we'll implement images as CSS backgrounds within div containers rather than traditional img tags. This approach provides significantly more control over positioning, sizing, and animation behaviors.

1. Return to index.html in your code editor.

2. Around line 17, add the following structural markup:

   <div class="page-layout">
      <div class="feature-wrap">
   
      </div>
      <div class="main-wrap">

   This creates a full-width container for our featured image sections. By default, div elements span 100% of their parent's width, which is exactly what we need. We'll add visual definition with CSS borders to separate sections clearly.

3. Save index.html.

4. Open the CSS file: Hawaii > css > style.css

5. Review the existing style.css file. You'll see foundational styles already defined to streamline your development process, including typography, basic layout, and color schemes.

6. Create visual separation by adding a feature-wrap rule. Locate the .main-wrap rule (around line 22) and add this CSS below it:

   .main-wrap {
      max-width: 1000px;
      margin: 45px auto;
      padding: 0 15px;
      font-family: 'Vollkorn', Georgia, serif;
   }
   .feature-wrap {
      border-top: 2px solid #181818;
      border-bottom: 2px solid #181818;
   }

   These borders create clean visual boundaries between content sections and will be particularly effective once we add background images.

7. Save style.css.

8. Preview index.html in your browser. Look for the subtle dark border at the page's top edge—this will become more prominent and visually appealing once we add our background imagery.

   Professional tip: Keep your browser tab open during development so you can quickly reload to see changes without repeatedly reopening files.

9. Switch back to index.html in your code editor.

10. Now we'll implement a modular approach for our image features. We'll create four distinct feature-wrap sections, each containing photo highlights with accompanying text. While these sections will share core styling, each will have unique characteristics. This modular structure makes the code maintainable and scalable.

11. Around line 18, inside the feature-wrap div, add our lead photo container:

    <div class="feature-wrap">
       <div class="photo lead">
    
       </div>
    </div>

    The dual-class approach (photo and lead) follows CSS best practices: photo provides shared styling across all image sections, while lead handles this specific section's unique properties.

12. Add the header content that will overlay our lead photograph:

    <div class="photo lead">
       <h3>Dan Rodney | May 2</h3>
       <h1>The Islands of Hawaii</h1>
       <h2>Diverse and Majestic</h2>
    </div>

13. Save the file.

14. Switch to style.css.

15. Add responsive spacing to the bottom of the file:

    .feature-wrap.lead {
       padding: 10% 0 30% 0;
    }

    Using percentage-based padding ensures our spacing scales proportionally with viewport size, maintaining visual balance across all devices. The four-value padding syntax follows the clockwise pattern: Top, Right, Bottom, Left (remember: "TRouBLe").

16. Save style.css.

17. Reload index.html in your browser. Observe the large headings and test the responsive behavior by resizing the window—notice how the percentage-based padding adapts to create consistent visual proportions.

18. Return to style.css in your code editor.

19. Add the background image by updating the lead style:

    .feature-wrap.lead {
       padding: 10% 0 30% 0;
       background-image: url(../img/lead.jpg);
    }

20. Save and reload your browser. The background image appears, but you'll likely see only a portion of the top-left corner due to the image's native size. Resizing the window reveals that the background crops rather than scales—we need to implement responsive background sizing.

    Let's create shared styling for all photo sections to ensure consistent, responsive image behavior across our design.

21. Add this foundational photo styling directly above the .feature-wrap.lead rule:

    .feature-wrap.photo {
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
    }

22. Understanding these essential CSS3 background properties:

    • background-repeat: no-repeat prevents unsightly image tiling when the container is larger than the image.
    • background-position: center centers the image both horizontally and vertically within its container.
    • background-size: cover is a powerful CSS3 feature that scales the image to completely fill the container while maintaining aspect ratio. This ensures optimal image display regardless of viewport dimensions.

23. Save the file and reload your browser to see the improvements.

    • Test the background-size: cover behavior by resizing the window to different aspect ratios.
    • Scroll through the page—currently the background image scrolls with the content, but we want to implement the popular "parallax" effect where the image remains fixed during scrolling.

24. Return to style.css in your code editor.

25. Implement the parallax scrolling effect:

    .feature-wrap.photo {
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
       background-attachment: fixed;
    }

26. Save the file and reload your browser. Test the scrolling behavior to see the sophisticated parallax effect in action! Note that in narrower windows, you may observe some differences in how the cover sizing behaves with fixed attachment.

    Important consideration: While background-attachment: fixed creates excellent effects on desktop, mobile support varies. Android Browser has limited support, and iOS has known conflicts between background-attachment: fixed and background-size: cover that can cause excessive image stretching. In later exercises, we'll implement media queries to disable fixed attachment on mobile devices, ensuring optimal performance across all platforms.

Styling the Header Text

Our header typography leverages Google Fonts to create distinctive, professional-quality text that maintains readability over photographic backgrounds. Google Fonts has become the industry standard for web typography due to its reliability, performance, and extensive font library. We've pre-loaded the necessary fonts, but you can explore the full collection at fonts.google.com for your own projects.

1. Return to style.css in your code editor.

2. Create the primary heading style. Around line 28, locate the .feature-wrap rule and add this typography styling below it:

   .lead h1 {
      font-family: 'Rye', cursive;
      font-weight: 400;
      font-size: 3.6em;
      line-height: 1em;
      text-transform: uppercase;
   }

   The 'Rye' font provides distinctive character that's perfect for travel and lifestyle content, while the generous font size ensures strong visual impact.

3. Save style.css and reload your browser to see the dramatic typography improvement.
4. Return to style.css in your code editor.

5. Add responsive spacing to prevent the heading from crowding the viewport edges:

   .lead h1 {
      font-family: 'Rye', cursive;
      font-weight: 400;
      font-size: 3.6em;
      line-height: 1em;
      text-transform: uppercase;
      margin: 1% 10% 0 10%;
   }

   These percentage-based margins ensure the text maintains appropriate breathing room at all screen sizes.

6. Save and reload to see the improved spacing and visual balance.
7. Return to style.css in your code editor.

8. Complete the header typography by adding styles for the subtitle and byline beneath the .lead h1 style:

   .lead h2 {
      font-family: 'Quicksand', sans-serif;
      font-size: 1.6em;
      line-height: 1em;
      text-transform: uppercase;
      margin: 1% 10% 0 10%;
   }
   .lead h3 {
      font-family: 'Quicksand', sans-serif;
      font-weight: 400;
      font-size: 1.05em;
      text-transform: uppercase;
      margin: 0 10%;
   }

   Note the efficient two-value margin syntax in the h3 style: the first value (0) applies to top and bottom margins, while the second value (10%) applies to left and right margins. This shorthand is equivalent to margin: 0 10% 0 10% and keeps your CSS clean and readable.

9. Save the file and reload your browser.

   Excellent! The complete header typography now creates a cohesive, professional appearance. The percentage-based margins ensure that spacing and proportions remain visually pleasing across all viewport sizes. Your header section is now ready—let's move on to implementing the photo panorama effect.

Styling the Photo Panorama

The panorama section will demonstrate another popular web design technique: full-width photographic sections with overlay text. Later in this series, we'll enhance this section with CSS animations to create a moving panorama effect.

1. Switch to index.html in your code editor.
2. Locate the placeholder text photo panorama around line 48.
3. Replace the photo panorama text with this structural markup:

4. Add the complete panorama section structure:

   <div class="feature-wrap">
      <div class="photo panorama">
   
      </div>
   </div>

5. Save the file.
6. Switch to style.css.

7. Add the panorama-specific styling at the bottom of the file:

   .feature-wrap.panorama {
      padding: 10% 0;
      background-image: url(../img/panorama.jpg);
   }

   This demonstrates CSS inheritance in action: the .panorama section automatically inherits all properties from the .photo class we defined earlier (including background-size, positioning, and the parallax scrolling effect), so we only need to specify the unique properties.

8. Save the file and preview index.html in your browser.

   Scroll down to see the panorama section—notice how it seamlessly inherits the cover sizing and parallax scrolling behavior from our foundational .photo styling.

9. We'll add panoramic animation effects in a later exercise. For now, let's create the text overlay that will appear over this dramatic landscape. Switch to index.html in your code editor.

10. Add a text container within the panorama section around line 50:

    <div class="photo panorama">
       <div class="text">
    
       </div>
    </div>

11. Add the panorama caption:

    <div class="text">
       Mt. Haleakala's southern face is vastly different from the north.
    </div>

12. Save the file.
13. Switch to style.css.

14. Create sophisticated text overlay styling at the bottom of the document:

    .feature-wrap.text {
       font-family: 'Rye', sans-serif;
       font-size: 3em;
       line-height: 1.1em;
       color: #f1f1f1;
       text-align: center;
       margin: 0 25%;
       text-shadow: 0 4px rgba(0,0,0,0.5);
    }

    The scoped styling (.feature-wrap.text) ensures these dramatic text effects only apply within our featured photo sections, maintaining clean separation between different content areas.

15. Understanding the CSS3 text-shadow property—a crucial tool for text legibility over images:

    • 0 0 represents the horizontal and vertical offset. Zero values position the shadow directly behind the text.
    • 4px controls the blur radius—larger values create softer, more diffuse shadows.
    • rgba(0,0,0,0.5) defines the shadow color using the red, green, blue, alpha model. RGB values of (0,0,0) create pure black, while the alpha value of 0.5 creates 50% transparency, ensuring the shadow enhances readability without overwhelming the design.

16. Save the file and reload your browser.

    The panorama text now features professional-quality styling with enhanced readability thanks to the text shadow. The percentage-based centering margins ensure the text remains perfectly positioned across all viewport sizes.

    Your panorama section is now complete and ready for future animation enhancements. Let's continue building the photo stack feature.

Styling the Photo Stack

The photo stack represents another powerful web design pattern: a series of full-screen image sections that create an immersive storytelling experience as users scroll through the content. This technique is particularly effective for portfolios, travel sites, and visual narratives.

1. Switch to index.html in your code editor.
2. Find the photo stack placeholder text around line 76.
3. Replace the photo stack text with our first photo stack section.

4. Create the first photo stack section:

   <div class="feature-wrap">
      <div class="photo stack">
         <div class="text">
            Hawaiian Luau: Good food & hula dancers!
         </div>
      </div>
   </div>

5. Since our photo stack contains three distinct images, we need to create two additional sections. Copy the code you just wrote.

6. Paste the code twice below the first section. You should now have three identical photo stack sections that we'll customize individually.