HTML Explanation
01
Inside the <head>, the character encoding is set to UTF-8 for universal compatibility, and a link is provided to the external CSS file (style.css) that contains the styling rules.
02
The body of the document includes a single h1 element with the text "MANILA."
03
This heading will serve as the main element for the hover animation.
04
The simplicity of the HTML allows the focus to remain on the visual effect.
CSS Explanation
01
The CSS brings the page to life with styling and animation.
02
The body is styled with a full-page background image, giving a scenic or thematic backdrop that complements the animated effect.
03
The h1 element is styled to appear prominently in the center of the screen.
04
The text is uppercase, styled with a sans-serif font, large font size, and a specific color palette.
05
The text is also given a background color (#fce328) and a slight shadow effect to enhance its visibility.
06
The hover animation is achieved using CSS :before and :after pseudo-elements on the h1.
07
These pseudo-elements overlay two different images, each set with a unique animation.
08
The :before pseudo-element displays the first buildings image.
09
It starts from below the text and animates upwards on hover, giving the effect of the moving building appearing from beneath.
10
The :after pseudo-element introduces the second buildings image.
11
Similarly, it starts from below and animates upwards when the h1 is hovered over.
12
Both pseudo-elements have their own keyframe animations (animateBefore and animateAfter) that create a seamless horizontal scrolling effect for their respective images.
13
The background-position changes from 0% to 100% over a period (10s and 15s respectively), making the buildings appear as though it is moving continuously.