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

Is it possible to target the HTML element or root node using the nth-child selector?

During one of my teaching sessions, I was discussing the nth-child() pseudo-selector with a student. I posed the question: Can you use the nth-child selector to target any HTML element? The response I received was negative, as it is not possible to select ...

htmlcss

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

javascriptjavajqueryhtmlselenium

Issue with Google Chart overlapping drop down menu in CSS紿orizontal scrollingyan

I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...

htmlcsspositioningz-indexgoogle-visualization

What is the method for including a Bootstrap Icon within a placeholder text?

I am attempting to insert a search icon inside an input text field, but I am unsure of how to accomplish this. My desired result is similar to: input search Can Bootstrap Icons be used within a placeholder? I have seen some examples, but the icon remaine ...

htmlcssbootstrap-4icons

The HTML div is not aligned in the center even when using flexbox

After creating a list within a centered flex div, it seems that the list is not aligning properly. I used flex on the list-div2 and the translate rule in the parent's middle-text div, but it still doesn't look centered as expected. Can anyone p ...

htmlcssflexbox

Improving access for disabled individuals in HTML through tab-index usage

Hey there, I'm currently dealing with some challenges regarding tab-index for disabled elements. It seems that we are unable to focus on the elements, as screen reader tools are not announcing them and are skipping over them directly. For example: I ...

htmlangularaccessibilitywai-aria

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

htmlcssimagehover

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

Exploring the integration of PostgreSQL into JavaScript

As a beginner in JavaScript, I am looking to create a web page that can store data in a database. Can anyone provide guidance on what resources or materials I should study to learn more about this process? ...

javascripthtmlmysqlnode.jspostgresql

Refresh a div element automatically with information from a different webpage using jQuery

I've been attempting to automatically reload a page and fetch new data every 10 seconds, or even less. However, the codes I've tried so far have not been successful. Here is my current approach... // script // <script> $(document).rea ...

javascriptphpjqueryhtmlajax

I would like some clarification on how bookmarking works

As I encountered a puzzling issue recently, I realize that I may need some assistance to navigate through it. It involves bookmarking some links for future reference. I attempted to search for answers online but found myself even more perplexed. Does boo ...

html

Does renaming a sub-directory in the static directory of an IntelliJ Spring Boot project cause any changes?

I'm a newcomer to IntelliJ and I've been using it to develop a Spring Boot application. Right now, my project structure looks like this: My goal is to set up a "css" directory within the "static" directory under the "resources" section so that I ...

javacssspringspring-bootintellij-idea

What could be causing my jQuery script to malfunction?

After scouring through numerous Stack Overflow questions and conducting countless Google searches, I am still stumped by the issue at hand. As a beginner in web development, all I want is for this simple page to function properly. Can someone please point ...

javascriptjqueryhtmlcss

Adjusting the display property using the CSS plus symbol operator

I am currently in the process of designing a dropdown menu using CSS. The focus is on utilizing the following code snippet: #submenu_div { display: none; } #li_id:hover + #submenu_div { display: block; } UPDATE: Here is the corrected HTML structure ...

htmlcss

CSS Padding Hover Transition solution for Eliminating Flickering Text issue

Is it possible to achieve this? I'm attempting to animate the padding around a centered text link. When the text link is clicked, the padding changes from 20% to 100%, which works correctly. The text is horizontally and vertically centered using CSS ...

csscss-transitions

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

Interactions of selecting dates in datepicker widget

Currently, I am working on developing my personal work website. One issue I have encountered is with the calendar feature. The "From" date can be selected before today's date, which is not ideal. Additionally, if a date 5 days from now is chosen as th ...

javascriptjquerycssdate

Analyzing the structure according to the month/week/year

My array consists of count and date values: day = [ { count: 1, date: '2022-07-07' }, { count: 1, date: '2022-08-14' }, { count: 2, date: '2022-07-19' }, { count: 4, date: '2022-07-19' }, { count: 2, date: ...

javascripthtmldatedatetime

What could be causing the "keyframes method" in my css to not function correctly?

When working on the keyframes section, my computer seems to be having trouble recognizing the from part. Ideally, it should display in blue with the opacity command appearing in grey. Unfortunately, neither of these styles are appearing correctly and I&apo ...

javascripthtmlcsscss-animations

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

jquerycssforms