CSS Positioning, Opacity, And Transitions

CSS Positioning, Opacity, And Transitions

Instructions/Descriptions

CSS Positioning, Opacity, And Transitions

In this practice you will use CSS positioning, opacity, and transitions properties to configure an interactive image gallery with CSS and HTML. Launch Notepad++ and open template.html. 2.Configure the text, “Image Gallery”, within an h1 element and within the title element. 3.Code a div element assigned to the id named gallery.

This div will contain a placeholder figure element and an unordered list that contains the thumbnail images. 4.Configure a figure element within the div. The figure element will contain a placeholder imp element that displays photo1.jpg. 5.Configure an unordered list within the div. Code size li elements, one for each thumbnail image. The thumbnail images will function as image links with a: hover pseudo-class that causes the larger image to display on the page. We’ll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is: Golden Gate Bridge 6. Configure all six li elements in a similar manner.

Substitute the actual name of each image file for the her a dark value in the code. Write your own descriptive text for each image. Use photo2.jpg and photo2thumb.jpg in the second li element. Use photo3.jpg and photo3gthumb.jpg in the third li element, and so on for all six images. Save the file as gallery2.html. Display your page in a browser. You’ll see the placeholder image followed by an unordered list with the thumbnail images, the larger images, and the descriptive text. 7.Now, let’s add CSS.

Open the file is it is not already open and code a style element in the head section. Configure the embedded CSS as follows: a. Configure the body element selector with a dark background color (#333333) and a light gray text color (#eaeaea). configure the gallery id selector. Set position to relative. This does not change the location of the gallery but sets the stage to use absolute positioning on the span element relative to its container (#gallery) instead of relative to the entire web page document. configure the figure element selector.

[Order Now]

Set position to absolute, left to 280px, text-align to center, and opacity to 0.25. This will cause the figure to initially be semi-opaque. configure the unordered list within the #gallery with a width of 300pixels and no list marker. configure the list item elements within the #gallery with inline display, left float, and 10 pixels of padding. configure the imp elements within the #gallery to not display a border. configure anchor elements within the #gallery with no underline, #exegetist color, and italic text. configure span elements within the #gallery.

[Order Now]

Set position to absolute, left to -1000px (which causes them not to display initially in the browser viewport), and opacity to 0. Also configure a three second ease-in-out transition. #gallery span {position: absolute; left: -1000px, opacity: 0; transition: opacity 3s ease-in-out;} I. Configure the span elements within the #gallery to display when the web visitor hovers the mouse over the thumbnail image link. Set position to absolute, top to 16px, left to 320px, centered text, and opacity to 1. #gallery a: hover span {position: absolute; top: 16px; left: 320px; text-align: center; opacity: 1;}

CSS Positioning, Opacity, And Transitions

PLACE THE ORDER WITH US TODAY AND GET A PERFECT SCORE!!!