LightBox Open Wear Create an animated slant box border effect Create an effect for images and other types of content components that responds to user interaction 1. HTML initiation The first step is to create the page document architecture from HTML. This consists of the HTML document definition, which holds the head and body sections. While the head section is used to load the external CSS file, the body section is used to store the HTML created in step 2. Hover Frame: Slant *** STEP 2 HERE 2. Visible HTML The visible content consists of a series of containers using the 'slant' class. You can place any content inside these containers. This example uses an individual image for each example container. The HTML is designed to be kept to a minimum, without any unnecessary elements for formatting or embedded styling. 3. CSS initiation With the HTML now complete, create a new file called 'styles.css'. The first definition in this file sets the HTML document and body container to display as a block with no margin or padding. This guarantees that the page will display without any visible border spacing. Optionally, you could add other properties, such as setting their min-height to 100%, meaning that the page is sized to fit the full screen. html,body{ display: block; margin: 0; padding: 0; } 4. Container class The slant container is identified using the 'slant' class. This element uses relative positioning, along with an inline-block display mode to allow it to flow as a normal text item while having sizing-related properties if required. Overflow is hidden to support the feature created in steps 5 and 6. .slant{ position: relative; display: inline-block; overflow: hidden; } 5. Border slant The slanted border feature is made from a box element overlaying the content container. This is achieved using the '::before' selector, which is used to define a virtual element inside CSS. This is set to be placed at the bottom of the slant container with a width and height that will cover enough space for the effect to work. .slant::before{ content: ""; display: block; position: absolute; bottom: -3em; left: -2em; width: 150%; height: 6em; } 6. More border slant The border slant needs to match the page background colour for the effect to work. Additionally, the element needs to be rotated via the transform attribute so that it doesn’t appear as a straight line. Finally, a transition with a duration of one second is applied so that any changes to the rotation transform appear animated. .slant::before{ background: #fff; transform: rotate(8deg); transition: transform 1s; } 7. Hovered slant The rotation is required to change when the slant is being hovered. This step sets the rotation angle when this occurs. The changes that occur will appear animated due to the previous step’s transition attribute. Changing the -8 to another number will alter the angle that the slant rotates towards. .slant:hover::before{ transform: rotate(-8deg); } *** lightbox _________________________________________________21