#Basic animated hero
We begin by adding one image and animating it. We start with some basic markup to scaffold the project
and show the elements of the header. We will animate the header__image-container and add styles to the img
element to ensure correct sizing and placement. We add a ::before psuedo element to the header__image-container
to darken the image a little.
<!DOCTYPE html>
<html>
<head>
<title>Hero Header: Level Up your CSS Animation</title>
<!-- The default layout, resets and and text styling -->
<link href="src/styles/main.css" rel="stylesheet" />
<!-- Custom styling for the header -->
<link href="src/styles/header.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="header__image-container">
<img class="header__image" src="src/assets/background.jpg" />
</div>
</header>
</body>
</html>.header__image-container {
animation: shrink-fade-in 2s cubic-bezier(0, 0.5, 0, 1) 0.5s forwards;
opacity: 0; /* set opacity to 0 on page load */
height: 50vh;
position: relative; /* relative to ensure correct placement of the ::before psuedo element */
}
.header__image-container::before {
content: "";
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.header__image {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes shrink-fade-in {
0% {
opacity: 0;
transform: scale(1.2);
}
100% {
opacity: 1;
transfprm: none;
}
}