The H1 tag fails to appear on the webpage

I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays correctly. Only the H1 is causing issues.

Check out the code here: H1 does not show up And here's the HTML code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="outerContainer">
        <div class="imageSlider">
            <div class="overlayShadow"></div>
            <div class="content">
                <h1> Test </h1>
                <input>
            </div>
        </div>
    </div>
</body>
</html>

SCSS:

.outerContainer {
    z-index: 1;
    overflow: hidden;
    height: 80vh;
    .imageSlider {
        z-index: -1;
        height: 80vh;
        position: relative;
        margin-bottom: 20px;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        background-image:           url('https://tinypng.com/images/social/website.jpg');
        animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
        transform: scale(1.5,1.5);
        .overlayShadow {
            z-index: -1;
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #000;
            animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
        }
    }
}
@-webkit-keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@-webkit-keyframes darken {
    0% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes darken {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.content {
    z-index: 1 !important;
    position: absolute !important;
    height: 300px !important;
    top: 50% !important;
    width: 100% !important;
    margin: 0 auto !important;
    h1 {
        font-size: 24px !important;
        display: inline-block !important;
        z-index: 999 !important;
        font-size: 14px !important;
        line-height: 1.43 !important;
        color: #484848 !important;
    }
}

Does anyone have any insights into why this is happening? Your help would be greatly appreciated.

htmlcsssasscss-animations

Answer №1

It appears that the .outerContainer .imageSlider is larger than its parent element (.outerContainer), causing it to extend beyond the boundaries of the parent which has overflow: hidden set.

To address this issue, you can apply a transform-origin property to the .outerContainer .imageSlider element.

For example:

.outerContainer .imageSlider {
    transform-origin: left center;
}

See the working code snippet below:

.outerContainer {
  z-index: 1;
  overflow: hidden;
  height: 80vh;
}
.imageSlider {
  z-index: -1;
  height: 80vh;
  position: relative;
  margin-bottom: 20px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  background-image: url('https://tinypng.com/images/social/website.jpg');
  animation: mymove 7s cubic-bezier(0, 1, 0, .5)infinite;
  transform: scale(1.5, 1.5);
  transform-origin: left center;
}
.overlayShadow {
  z-index: -1;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  animation: darken 7s cubic-bezier(0, 1, 1, .8) infinite;
}
@-webkit-keyframes mymove {
  0% {
    top: 0px;
  }
  100% {
    top: -70px;
  }
}
...
</div>

Answer №2

One problem arises due to the usage of transform: scale on .imageslider, causing the content to extend beyond the boundaries of its containing element. Additionally, applying overflow: hidden; results in any overflow being concealed within the element.

Answer №3

Give this a shot. 

    .outerContainer {
      z-index: 1;
      overflow: hidden;
      height: 80vh;
    }
    .imageSlider {
        z-index: -1;
        height: 80vh;
        position: relative;
        margin-bottom: 20px;
        background-position: center;
        background-size: cover;
        overflow: hidden;
        background-image:           url('https://tinypng.com/images/social/website.jpg');
        animation: mymove 7s cubic-bezier(0,1,0,.5)infinite;
        transform: scale(1.5,1.5);
      }
      .overlayShadow {
          z-index: -1;
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: #000;
          animation: darken 7s cubic-bezier(0,1,1,.8) infinite;
      }
    }
}
@-webkit-keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@keyframes mymove {
    0% {
        top: 0px;
    }
    100% {
        top: -70px;
    }
}
@-webkit-keyframes darken {
    0% {
        opacity: 1;
    }
    26% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes darken {
    0% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.content {
    z-index: 9999 !important;
    position: absolute !important;
    height: 300px !important;
    top: 50%;
    width: 100% !important;
    margin: 0 auto !important;
    left: 50%;
    right: 50%;
}
  h1 {
    font-size: 24px !important;
    display: inline-block !important;
    z-index: 999 !important;
    font-size: 14px !important;
    line-height: 1.43 !important;
    color: #484848 !important;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <div class="outerContainer">
                <div class="imageSlider">
                    <div class="overlayShadow"></div>
                    <div class="content">
                      <h1>
                        Experiment
                      </h1>
                     <input> 
                    </div>
                </div>
        </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click on the social media icon to access the link

Recently, I created a social media icon list for my website but I'm struggling to figure out how to add clickable links to them. I attempted using the "a" tag, but it's not functioning as expected: <div class="leftside"> <ul class= ...

htmlcsshyperlinkicons

Pressing the button in the navigation bar results in an expansion of the navbar

Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...

htmlcssbootstrap-4

JavaScript decimal precision function malfunctioning with currency format conversion

My current snippet works perfectly with the currency format 249.00, but I need to adapt it for a site that uses euros with pricing in the format 249,00. When I make this change, the total calculation goes haywire and shows as 29.900,00. Can someone advise ...

javascripthtml

Arrange the DIVs in the identical spot and switch them back and forth

I'm struggling with a dilemma involving two DIVs. I am looking to have two DIVs positioned in the exact same spot on the page and toggle between them. When one div disappears, the other should appear using jQuery toggle(). The challenge lies in havi ...

csshtmlpositioning

Adding additional images to the left side of the slide

My goal is to display multiple images in two rows. The alignment works well for up to 9 images, but beyond that, the additional images appear on a third row instead of staying within the two rows. I want to ensure they are contained within 2 rows only. How ...

htmlcss

Dynamic scrolling text for overflowing text display

Here's a scenario I'm facing: Let's say I have three div tags, each 100 pixels wide: <--- DIV WIDTH ---> Text in div 1 Text in div two, it overflows Text in div three <--- DIV WIDTH ---> Currently, I've set the following C ...

javascriptjqueryhtmlcssmarquee

The file or directory does not exist: 'G:Aframara Websiteimages' - ENOENT

Currently, I'm in the process of cleaning up the unused CSS in my website's style.css and bootstrap.min.css files during development. I am utilizing PostCSS and Parcel for this task. After installing PostCSS and Parcel, I proceeded to create a p ...

htmlcssnpmpostcssparceljs

JSP staying away from servlets

On my website, I have a .jsp page with a form like this: <form name="myForm" method="post" action="LoginServlet"> <div class="form-group"> <label for="exampleXPID">userid</label> <div class="input-gr ...

javahtmljspservlets

What is causing concatenated string class names to fail in Tailwind CSS?

Whenever I find myself needing to style my React elements, I end up using the style attribute instead of className. None of the examples I've come across seem to apply styles that fit my specific needs. Can you shed some light on why this happens and ...

cssstringnext.jsconcatenationtailwind-css

Creating a responsive single webpage using HTML/CSS

How can I make some div or img responsive for mobile format? <meta name="viewport" content="width=device-width, initial-scale=1" /> <div class="container"> <h1 class="title"> ...

htmlcss

Designing websites and Creating Visual Content

I have been working in IT for quite some time now, but recently I have started to delve more into web development. My main focus is on HTML 5, CSS 3, JavaScript, jQuery, and responsive design. However, one aspect that I always struggle with is images. I am ...

htmlcssresponsive-designimage-sizeimage-editing

The Bootstrap 5 navigation bar does not extend to the full width of its parent

While working on a Bootstrap navigation inside a container, I encountered an issue where the navigation bar was not expanding to match the width of the container. It seemed like the padding had to be manually adjusted to fit properly. Below is the code sn ...

javascripthtmlcssbootstrap-5

The design I created includes a horizontal scroll feature and certain elements are not properly aligned in the

Oh man, I'm really frustrated right now. I want all my elements to be centered horizontally on smaller devices, but some of them are slightly off to the side. And to top it off, there's a horizontal scroll appearing - it's like something is ...

htmlcss

Adjusting image width using jQuery

I have been experimenting with creating a Webgl hover effect for an image. The effect works well, but now I am trying to specify a width for the image within jQuery. new hoverEffect({ parent: document.querySelector('.ticket'), intensity1: 0. ...

javascriptjqueryhtmlcss

I am experiencing issues with how the data from the database is being displayed

I'm trying to fetch all my users from the database. The code works, but I believe there is an issue with my syntax and how it's being echoed. As a result, it generates a separate table for each data entry. Check out the attached image for refer ...

phphtmlmysqlbootstrap-4

verify access with mysql database

Need urgent assistance, sorry if this is a repeated query due to my username! I am facing an issue with my login page. I want it to redirect to my home page when authentication fails by cross-checking input with a MySQL database which should output succes ...

phphtmlmysqldatabase

Creating separation between a dropdown menu and its corresponding button

I'm dealing with a situation where I have a button that reveals a hidden droplist upon hover. The problem is that there is no space between the button and the droplist, causing interference with the functionality. My attempt to create some distance b ...

htmlcss

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

After successfully implementing a custom alert box to hide the header with JavaScript, I encountered an issue when trying to use it on different browsers and Android devices. The alert box appeared misplaced on the page and was too big for certain Android ...

javascriptandroidcsscross-browserhybrid

Center Button Horizontally and Vertically with CSS Code

I really need some assistance with getting this button I made to be perfectly centered on both the vertical and horizontal axes of the page. So far, I've managed to center it horizontally, but not vertically. Any advice or guidance would be greatly ap ...

htmlcss

Align an image in the middle with a heading

I am currently working on aligning a picture and heading in a header section. My goal is to center both elements, with the picture being twice as tall as the heading. So far, I have them stacked one above the other: .body { font: 15px/1.5 Arial, Helveti ...

htmlcss