Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation.

My HTML & CSS structure is set up as follows:

.parent{
   background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1beb8600_hq.jpg');
    background-repeat: no-repeat;
    background-position: center;
    padding: 35px;
    margin: 15px 0;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.parent:hover{
    animation-name: bounce;
 }
 
 @keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        -ms-transform:     translateY(0);
        transform:         translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform:     translateY(-30px);
        transform:         translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform:     translateY(-15px);
        transform:         translateY(-15px)
    }
}

p{
  font-size: 50px;
  color: blue;
  text-align: center;
}
<div class="parent">
  <p>TEST</p>
</div>

Ultimately, I aim to keep the text inside the parent element static. The goal is to animate the image while keeping the text stationary and unaffected by the animation.

htmlcss

Answer №1

One way to add animation is by utilizing the background-position property, which affects only the background image and not the text content. I also incorporated the calc() function to maintain the image centered while animating it up and down.

.parent {
  background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1beb8600_hq.jpg');
  background-repeat: no-repeat;
  background-position: center;
  padding: 35px;
  margin: 15px 0;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.parent:hover {
  animation-name: bounce;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    background-position: left 50% top 50%;
  }
  40% {
    background-position: left 50% top calc(50% + -30px);
  }
  60% {
    background-position: left 50% top calc(50% + -15px);
  }
}

p {
  font-size: 50px;
  color: blue;
  text-align: center;
}
<div class="parent">
  <p>TEST</p>
</div>

Answer №2

Combine the image and text within the same container. Then, use absolute positioning to take the text out of the flow, setting the z-index so the text remains visible during animations. Place the text before the image to enable a bouncing effect on the image when hovering over the text. Use transform and left properties for text centering.

.image{
    background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1beb8600_hq.jpg');
    background-repeat: no-repeat;
    background-position: center;
    padding: 35px;
    margin: 15px 0;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;     
}
#parent{     
   position:relative  
   
}
#pid{  
    transform: translateY(50%);   
    position:absolute;
    z-index:1;     
    left:50%;
    
}

.image:hover,#pid:hover + .image{
    animation-name: bounce;
}

@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translateY(0);
        -ms-transform:     translateY(0);
        transform:         translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform:     translateY(-30px);
        transform:         translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform:     translateY(-15px);
        transform:         translateY(-15px)
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title id="title">Document</title>
</head>
<body>
    
        <div id=parent> 
            <p id="pid">TEST</p>
            <div class="image"></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

Python and Selenium are a powerful combination, but sometimes you may encounter the error message "Element cannot be clicked at point (x,y)

I'm trying to automate the selection of a checkbox on a webpage using Selenium and Python with this line of code: self.driver.find_element_by_id('lg_1166').click() Unfortunately, I'm encountering an error message: Message: Element < ...

htmlpython-3.xseleniumfirefoxselenium-firefoxdriver

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the botto ...

javascriptcssreactjsreact-bootstrap

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

javascriptphphtmlforms

Utilize jQuery to find elements based on a specific attribute containing a certain value

I need help targeting specific attributes in links to append classes based on the file extension. My page displays various types of files, from images to .ppt files. I am using ASP.NET MVC and jQuery for this project. <a class="screenshot" title="" fil ...

jqueryhtmlcsssearchattr

Exploring Angular2's interaction with HTML5 local storage

Currently, I am following a tutorial on authentication in Angular2 which can be found at the following link: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492 I have encountered an issue with the code snippet below: import localSt ...

javascripthtmlangulartypescriptlocal-storage

In-line divs are known for their rebellious nature, refusing to conform to traditional

I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately. The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a ...

htmlcssstyles

Incorporating Keyboard Features into Buttons

How can I toggle the page selectors in #pageList using a keyboard shortcut instead of clicking on the .togglePL button? I've tried looking up solutions online and asking questions here, but haven't found a working solution yet. Below is the code ...

javascriptjqueryhtmlcss

I am having trouble viewing elements located below a div that I created using CSS

Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to v ...

htmlcssreactjs

Implementing jQuery to showcase an element on the screen

I would like to express my gratitude to everyone who has helped me. Please forgive my poor English :) Can someone provide me with a jQuery script that can extract the name of the currently selected tab and display it in an h1 tag? Whenever the selected ta ...

jqueryhtmlcss

What is causing the div to not update until the for loop is completed?

I have an HTML page where I am trying to update a div while a for loop is running. However, the div does not update until after the loop finishes. Why is this happening? <!DOCTYPE html> <html> <body> ...

htmlloopsdisplay

Positioning the HTML form in the middle of the page

The given HTML code generates a form within a table, but despite aligning the table to the center, it remains on the left side of the webpage. <!DOCTYPE html> <html> <head> <style>input.textfill { float: right; }&l ...

htmlcssalignmentcentercss-tables

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext

The process of uploading images to a server by making an AJAX call to a PHP file

I have an input file and I want to upload the attached file to the server with a message saying "uploaded successfully" when I click on the upload button. However, I am getting a "file not sent" message. (The uploaded images need to be saved in the uploa ...

javascriptphphtmlajax

Quiz results are incorrect

I've been working on creating a quiz application using JavaScript only, but I'm encountering an issue with the scoring. Initially, I set the correct variable to 0 and intended to increment it by 1 each time a correct answer is selected. However, ...

javascripthtml

What is the best way to create a scrollable tbody in an HTML table using React?

In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...

javascripthtmlcssreactjsbootstrap-4

JavaScript | Calculating total and separate scores by moving one div onto another div

I have a fun project in progress involving HTML and Javascript. It's a virtual zoo where you can drag and drop different animals into their designated cages. As you move the animals, the total count of animals in the zoo updates automatically with the ...

javascripthtmlcountdrag-and-dropdrop

Tips for perfectly aligning all elements in a row within a card design

Hi there, I'm trying to figure out how to align the content of this card in a single row instead of stacked on top of each other. Here's the code snippet: <div class="container"> <form onSubmit={submitHandler}> ...

cssreactjsmaterial-ui

How come my flex-box navigation bar is not collapsing as I shrink the browser window size?

I'm currently experimenting with FlexBox to enhance the design of my website, specifically focusing on creating a responsive and collapsible navigation bar for mobile users. I'm encountering issues with the flex commands in the .nbar class not wo ...

htmlcssflexbox

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

androidapihtml

Is there a way to prevent the imported JQuery from causing issues with current code implementations?

Being a novice developer in Html/Javascript/CSS/Jquery coding, I recently encountered an issue while integrating Jquery into my project. When I imported Jquery, the styling of simple buttons went haywire. Jquery worked perfectly fine when using its classes ...

javascriptjqueryhtmlcss