Added overlay to header with background image

This commit is contained in:
Sodbileg Gansukh 2023-07-31 17:56:50 +08:00
parent be114956d9
commit d06d91ec0d
3 changed files with 36 additions and 14 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -826,14 +826,6 @@ Search LOGO Login Subscribe
margin-top: 40px;
}
.gh-header-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-header-inner {
position: relative;
}
@ -1046,10 +1038,6 @@ Search LOGO Login Subscribe
text-align: center;
}
.gh-header.is-classic.has-image .gh-header-inner {
color: #fff;
}
.gh-header.is-classic .gh-header-title {
font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
font-weight: 750;
@ -1113,6 +1101,36 @@ Search LOGO Login Subscribe
color: var(--color-secondary-text);
}
.gh-header.is-classic.has-image {
margin-top: 0;
}
.gh-header.is-classic.has-image::before {
position: absolute;
inset: 0;
content: "";
opacity: 0.3;
background-color: var(--color-black);
transition: opacity 1.5s ease;
}
.gh-header.is-classic.has-image .gh-header-inner {
color: #fff;
}
.gh-header.is-classic.has-image .gh-header-image {
position: absolute;
inset: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
}
.gh-header.is-classic.has-image .gh-header-form {
background-color: #fff;
}
/* 9. CTA
/* ---------------------------------------------------------- */
@ -1205,6 +1223,10 @@ Search LOGO Login Subscribe
margin-top: 100px;
}
.gh-navigation + .gh-featured {
margin-top: 64px;
}
.gh-featured-title {
margin-bottom: 20px;
padding-bottom: 12px;