Long description

The first browser window that has a tab titled Chapter 7 placed at the top left of the figure. The address bar reads, figure 07 hyphen transition 3 dot h t m l. The browser window consists of a level-1 heading and 4 images. The level-1 heading that reads, "Share Your Travels" is at the top of the browser window and is aligned to the left. The images are placed side-by-side below the heading. The images are labeled as follows: Image1: Battle Castle, U K. Image 2: Sunset, Santorini. Image 3: Lucca, Italy. Image 4: Verona, Italy.

The first block of code placed at the right of the first browser window that reads as follows: Line 1: figure open curly brace at indentation level 0. Line 2: background hyphen color colon white semicolon at indentation level 1. Line 3: color colon black semicolon at indentation level 1. Line 4: width colon 200 p x semicolon at indentation level 1. Line 5: transition colon all 0.6 s ease hyphen out 0.25 s semicolon at indentation level 1.

The second browser window that has a tab titled Chapter 7 is placed at the bottom right of the first browser window. The address bar reads, figure 07 hyphen transition 3 dot h t m l is shown. The browser window consists of a level-1 heading and 4 images. The level-1 heading that reads, "Share Your Travels" is at the top of the browser window and is aligned to the left. The images are arranged in side-by-side below the heading. The images are labeled as follows: Image1: Battle Castle, U K. Image 2: Sunset, Santorini. Image 3: Lucca, Italy. Image 4: Verone, Italy. The mouse cursor is pointed on Image 3 labeled Lucca, Italy, which appears enlarged and indicates that the image is selected.

The second block of code is placed below the second browser window and reads as follows: Line 1: figure colon hover open curly brace at indentation level 0. Line 2: background hyphen color colon hash 2 6 3 2 3 8 semicolon at indentation level 1. Line 3: color colon white semicolon at indentation level 1. Line 4: transform colon scale open parenthesis 1.75 close parenthesis semicolon at indentation level 1. Line 5: box hyphen shadow colon 10 p x 10 p x 32 p x negative 4 p x r g b “a” open parenthesis 0 comma 0 comma 0 comma 0.75 close parenthesis semicolon at indentation level 1. Line 3 to Line 5 refers to "In the hover state, we are changing these four properties". Line 6: transition colon all 1 s ease hyphen in 0.25 s semicolon at indentation level 1. In Line 6 "all" is explained as: "So we will use the all keyword to tell browser to transition all properties that have changed". Line 7: close curly brace at indentation level 0.