hero improvement

Netcentric · Nov 8, 2024 · 0527278 · 0527278
1 parent 9b358f5
commit 0527278
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/blocks/v2-hero/v2-hero.css b/blocks/v2-hero/v2-hero.css
@@ -6,6 +6,18 @@
   max-width: 100%;
 }
 
-.v2-hero__container, .v2-hero__container img {
+.v2-hero__container {
+  position: relative;
+  overflow: hidden;
+}
+
+.v2-hero__img-container, .v2-hero__img-container img {
   width: 100%;
+}
+
+.v2-hero__title {
+  position: absolute;
+  bottom: 1rem;
+  left: 3rem;
+  color: var(--background-color);
 }
diff --git a/blocks/v2-hero/v2-hero.js b/blocks/v2-hero/v2-hero.js
@@ -3,12 +3,16 @@ const blockName = 'v2-hero';
 export default function decorate(block) {
   const pictures = block.querySelectorAll('picture');
   const imgParent = pictures[0].parentElement;
+  const heroContainer = imgParent.parentElement;
   const newPicture = document.createElement('picture');
   const mediaQueries = ['(max-width: 749px)', '(min-width: 750px)'];
   const MQ = window.matchMedia('(min-width: 750px)');
   const img = document.createElement('img');
+  const title = block.querySelector('h1');
 
-  imgParent.classList.add(`${blockName}__container`);
+  heroContainer.classList.add(`${blockName}__container`);
+  imgParent.classList.add(`${blockName}__img-container`);
+  title.classList.add(`${blockName}__title`);
 
   mediaQueries.forEach((mediaQuery, index) => {
     const source = document.createElement('source');