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

Customize the drawer background in Vue Material

Recently, I developed a vuejs application incorporating Google's material design components. I've been exploring options to customize the background color. <template> <div class="page-container"> <md-app> ...

cssvue.jssassvue-material

The MUI snackbar element lingers in the DOM even after it has been closed

Having created a global modal with the intention of only utilizing it when necessary, I've encountered an issue where the snackbar div persists in the DOM. This persistence is causing certain elements to become blocked as they appear beneath this div. ...

cssreactjsmaterial-ui

Unable to use the ordered tag correctly in typing

Please review the HTML and CSS Code provided below: HTML : <ol> <li>Test</li> <li> <ol> <li>Sub-Chapter</li> <li>Sub-Chapter</li> </ol> < ...

htmlcss

What could be causing the issue with my Date and Time input not functioning correctly?

I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "Ty ...

cssreactjsmaterial-ui

Using Bootstrap 3 to create a carousel with a seamless fading transition as the background

I want to utilize Bootstrap Carousel as the background for my website. I've successfully incorporated a standard carousel as the background, but I'm encountering difficulties with making fade transitions. Here is my current implementation: HTML: ...

csstwitter-bootstrap-3

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

Having an issue with jQuery. Trying to include the fixed-top class (Bootstrap 4) when scrolling, but it's not working as expected. jQuery(document).ready(function($){ var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".robig").a ...

javascriptjqueryhtmlbootstrap-4

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

I currently have a small form with two buttons - one for browsing and another for uploading an image. I feel that having two separate buttons for this purpose is unnecessary. Is there a way to combine the browse and upload functions into just one button? ...

phpjavascripthtmlfileupload

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

I have a unique situation where I need to display a dynamic list of icons in a right side bar. These icons are added to the sidebar based on user actions and are displayed using the ngFor directive. The challenge here is that some icons come from Font Awe ...

cssangularfont-awesomengforgoogle-material-icons

Leverage variable as an expression when utilizing ng-include

Here is an example of working code: <div ng-include src="'Test.html'"></div> However, this code does not work: <div ng-include src="ctrl.URL"></div> (When ctrl.URL is set to "Test.html"). I have also tried setting it t ...

javascripthtmlangularjsdirective

Utilizing JavaScript and PHP to dynamically load HTML content on a webpage

Below is the code snippet I'm working with: <?php if ($x == 1){ ?> <b>Some html...</b> <?php } else if ($x==2){ ?> <b> Other html...</b> <?php } ?> Now, I want to create two links (a ...

phpjavascriptjqueryhtml

All UL and LI elements are aligned horizontally both before and after

Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...

htmlcss

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Within my code, I have a designated DIV element that serves as the root node for applying knockout bindings like so: ko.applyBindings(viewModel, document.getElementById('myContainerDiv')); In all of my viewmodel types, there is a generic post m ...

javascripthtmlknockout.jsjquery-blockui

Mystery factor triggering the appearance of scrollbar as the window is resized to a specific width threshold

I'm facing a rather peculiar problem. I'm currently in the process of creating a webpage tailored for an iPhone screen resolution of: width: 640; height: 960; However, there seems to be a mysterious hidden element that is extending the width of ...

iphonehtmlcss

The Multipart Parser encountered an unexpected end of stream error while in the starting state

i encounter this issue when attempting to submit a form link(rel='stylesheet',href='/stylesheets/home/profile/home_menu.css') script(type='text/javascript',src='/javascripts/perfil_editar.js') #logo_usuario img ...

htmlnode.jsexpresspugmultipartform-data

Minify and group options available for asset managers specifically designed for traditional HTML websites

My primary focus is on working with the CakePHP framework and utilizing a fantastic plugin that minifies and groups selected assets into a single file, reducing the number of HTTP requests needed for the entire site. Currently, I am collaborating with des ...

jqueryhtmlnode.jscsscakephp

Slick.js integrated with 3D flip is automatically flipping after the initial rotation

I'm encountering an issue with my CSS3 carousel and 3D flipping. Whenever I navigate through the carousel and flip to the next slide, the first slide seems to automatically flip/flop after completing the rotation. You can see a visual demonstration o ...

javascriptjqueryhtmlcss

Utilizing HTML and JavaScript to add grayscale effect to images within a table, with the ability to revert to the colored version upon mouseover

Seeking advice on utilizing the mouseover / mouseout event in javascript to implement grayscale on a table. The challenge requires creating a gray image grid (table) using HTML and then incorporating Javascript so that hovering over an image triggers it to ...

javascripthtmlonmouseovergrayscaleonmouseout

The Challenges of CSS Specificity in Multiple Browsers

I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...

htmlcsscross-browser

Issue with spacing in Internet Explorer 8

I am encountering an issue with a button style in IE8 that is adding extra space. I suspect it may be related to the min-height property, but I have tried using overflow hidden and min-height hacks without any success. Here is the link to the code on JSFi ...

cssinternet-explorer-8spacing

Discovering the power of VBA in combination with Selenium to pinpoint and interact with a particular cell within a table

I am attempting to access a specific cell within a table on a webpage. The cell I need to reach has an id of "flowTile_6". It is highlighted below. I have tried multiple methods, but all resulted in errors. One approach I attempted was using the followi ...

htmlexcelvbaselenium