Achieving Background Animation with CSS: Placing Elements Behind Others

I am trying to create a sliding down image effect that animates behind the header element. I attempted to use z-index on both elements, but it did not work. Switching from position: absolute to position: fixed also did not yield the desired result.

header {
  background-color: yellow;
  padding: 20px;
  z-index: 2;
}

.slideDownImage {
  position: absolute;
  animation: slideDown 5s ease forwards;
  z-index: 1;
}
        
@keyframes slideDown {
0% {
  transform: translateY(-100%);
} 100% {
  transform: translateY(0);
}
<header>
  Hello, Mr. Mouse!
</header>

<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Mouse_white_background.jpg" class="slideDownImage">

Answer №1

Adjusting the header position to relative should solve the issue

header {
  position:relative;
  background-color: yellow;
  padding: 20px;
  z-index:1;
}

.slideDownImage {
  animation: slideDown 5s ease forwards;
}
     
@keyframes slideDown {
0% {
  transform: translateY(-100%);
} 100% {
  transform: translateY(0);
}
<header>
  Hello, Mr. Mouse!
</header>

<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Mouse_white_background.jpg" class="slideDownImage">

Answer №2

I implemented a solution by adding the CSS properties position:absolute; and width:100% to the header element.

header {
  background-color: yellow;
  padding: 20px;
  z-index: 20;
  position:absolute;
  width:100%
}

.slideDownImage {
  position: relative;
  animation: slideDown 5s ease forwards;
  z-index: 1;
}
        
@keyframes slideDown {
0% {
  transform: translateY(-100%);
} 100% {
  transform: translateY(0);
}
<header>
  Hello, Mr. Mouse!
</header>

<img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Mouse_white_background.jpg" class="slideDownImage">

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

bottom-of-the-page footer

I'm trying to keep the footer at the bottom of the page when scrolling down, but it seems to remain fixed in one position. I suspect it may be related to the backstretch plugin written in jQuery, here is my code: <title>Atec Clima</title> ...

Is there a way to customize the mark style in Bootstrap?

I've gone through numerous articles on this issue, but I'm still unable to resolve it. My goal is simply to eliminate the padding that bootstrap automatically adds around the mark tag. This is important because I am dynamically changing highlight ...

Ensure all vertically stacked boxes maintain the same height using Flexbox technology

My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward. I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per r ...

Applying Adjusting Widths in Tailwind CSS for Large Screens without Sacrificing Full Width on Small Screens

I'm currently developing a React component in which I need to adjust the width of a modal dynamically on larger screens while maintaining full width on smaller ones using Tailwind CSS. Below is the code snippet I have implemented: import React, { use ...

Styling with CSS: Making a div's height fit within another div, including padding

Looking at the image, there seems to be a div with a width of 100% and no defined height. Instead, the height adjusts based on the content, with top and bottom padding in percentages. The issue arises when trying to place navigation buttons on the right si ...

Placing pictures one on top of the other as shown in the illustrations

Just joined this community and hoping for some guidance. I'm working on arranging separate images in a specific layout like this. Here's my code on jsfiddle. This is the HTML I'm using: <body> <div class="grid-container" ...

What is the best way to showcase two div elements side by side within my carousel

/* Implementing slideshow functionality */ var currentIndex = 0; displaySlides(); function displaySlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i ...

Cursor disabling effect in IE 11 causing interference with drop-down options on Twitter Bootstrap 3

Right above a disabled twitter bootstrap 'form-control' input element sits a drop-down list. <div> <select> <option> Option 1 </option> <option> Option 2 </option> <option> Op ...

Looking to apply CSS selectors with variables to target all TD elements within a specific table?

Looking to apply CSS properties to all td IDs for rows in a table? Instead of individually targeting each ID like this: .idName1, idName2, idName3, idName4, idName5 {background-color: ##4CAF50;} You can simplify the process by using a PHP variable to ind ...

Information provided in a login form does not carry over to a different page display

I'm currently facing a problem with my JavaScript code. I have constructed a login form and am attempting to transfer the data from the form to another page where it will be showcased in a table. Regrettably, the details are failing to appear on the s ...

Creating a folded-corner effect in CSS with a clear background - here's how!

Can anyone assist me? I am trying to change the folded-corner to be transparent instead of a solid color. Please refer to the image below for guidance. https://i.sstatic.net/ZMrT8.png I have attempted to modify these codes: .back-ground { backgrou ...

The iPhone is having trouble resizing background images in Bootstrap 5 Carousel

While working on my website using the Bootstrap 5 carousel template, I encountered an issue with the carousel images not resizing correctly on my iPhone. The images appear zoomed in to the upper left corner and cut off on smaller devices. I've attemp ...

The selected Google Font Family remains unchanged

After taking a break, I decided to dive back into web development in order to create a simple webpage. My starting point is Bootstrap, and I am constructing my page based on that framework. However, I'm facing an issue with changing the font family of ...

Carousel With Multiple Items Displayed Simultaneously In Bootstrap

Is there a way to create a carousel with multiple items in Bootstrap 4? The documentation talks about multiple carousels, but not specifically about how to display multiple items within a carousel. ...

"Enhancing user input with a blend of material design and bootstrap-

I'm currently developing a Vue web application and utilizing bootstrap-4 as my CSS framework. I'm aiming to achieve input fields that resemble material design. However, Bootstrap offers only the older style of input fields with borders on all sid ...

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

show the initial distinct component on the entire webpage

How can I show only the first element and hide all others? Check out this example: <style> h1 { display: none; } h1:first-of-type{ display: block; } </style> <body> <div class="content"> ...

Is it possible to merge string and span elements to create a unified element?

In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...

Removing a jQuery class while simultaneously adding it to different elements

I am currently working on a webpage where I have a row of 6 images. The first image, when the page loads, undergoes transformations using CSS3 due to a specific class applied to it. When the user hovers over the other images in the line, the same class is ...

Adjusting font size in a responsive div using Bootstrap 4

I'm attempting to dynamically resize text within a div, similar to the functionality shown in this example. As I resize the div, I want the font size to adjust accordingly. I've tried using various relative length units in pure CSS for the text ...