Activate animation when hovering over an image within a container

I am attempting to create an animation that runs on one image inside a div when I hover over another image within the same div. However, it is not working as expected. The animation only takes effect when I use #div:hover, but not when I use #image:hover.

http://jsfiddle.net/tvmfjpbc/#&togetherjs=99g0GlPB33

#test {
  position: relative;
  width: auto;
  height: 600px;
  Background: lightblue;
  margin: auto;
}

#cat {
  position: absolute;
  left: 150px;
  top: 0;
  animation-name: cat;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-play-state: paused;
}

#banana:hover #cat {
  animation-play-state: running;
}

@keyframes cat {
  0% {
    left: 150px;
  }
  100% {
    left: 250px;
  }
}
<div id="test">
  <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg">
  <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
</div>

htmlcss

Answer №1

The selector showcased here utilizes a general sibling combinator to match elements based on their sibling relationships. This particular type of selector is specified using the tilde character (~).

Give this a shot: 

#test {
  position: relative;
  width: auto;
  height: 600px;
  Background: lightblue;
  margin: auto;
}

#cat {
  position: absolute;
  left: 150px;
  top: 0;
  animation-name: cat;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-play-state: paused;
}

#banana:hover~#cat {
  animation-play-state: running;
}

@keyframes cat {
  0% {
    left: 150px;
  }
  100% {
    left: 250px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing</title>
  <link rel="stylesheet" href="test-style.css">
</head>

<body>
  <div id="test">
    <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg">
    <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
  </div>
</body>

</html>

Answer №2

try using the #banana:hover+#cat selector in your CSS

#test {
  position: relative;
  width: auto;
  height: 600px;
  Background: lightblue;
  margin: auto;
}

#cat {
  position: absolute;
  left: 150px;
  top: 0;
  animation-name: cat;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-play-state: paused;
}

#banana:hover+#cat
 {
  animation-play-state: running;
}

@keyframes cat {
  0% {
    left: 150px;
  }
  100% {
    left: 250px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Testing</title>
  <link rel="stylesheet" href="test-style.css">
</head>

<body>
  <div id="test">
    <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg" class='hov'>
    <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
  </div>
</body>

</html>

Answer №3

You originally set up #cat as a child of #banana in your CSS. To make them siblings, you should use either an adjacent sibling combinator or a general sibling combinator.

#test {
  position: relative;
  width: auto;
  height: 600px;
  Background: lightblue;
  margin: auto;
}

#cat {
  position: absolute;
  left: 150px;
  top: 0;
  animation-name: cat;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-play-state: paused;
}

#banana:hover + #cat {
  animation-play-state: running;
}

@keyframes cat {
  0% {
    left: 150px;
  }
  100% {
    left: 250px;
  }
}
<div id="test">
  <img id="banana" src="https://i.imgur.com/D9TI3VT.jpg">
  <img id="cat" src="https://i.imgur.com/j8gJnFq.jpg">
</div>

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

Having trouble with an AJAX request to display a template in Flask

Imagine having two radio buttons labeled 1 and 2, along with some text at the bottom of a webpage. Initially, the text value is set to -1 and no radio buttons are selected. If one of the radio buttons is clicked, the text value should change to either 1 or ...

javascriptpythonjqueryhtmlflask

Adjust the width of the div according to the space available from its neighboring div

Is there a way in Bootstrap to have two divs on the same row, where if one is removed, the remaining div takes up the full width? <div class="row"> <div class="col-sm-6" style="background-color:lavender;">Div1</div> <div class ...

javascripthtmlcss

:initial selector malfunctioning in CSS

I was hoping to see the :first selector in action with the example below. Unfortunately, the paragraph did not turn red with a background. Can anyone offer some assistance? p:first{background:red;} <p>This is paragraph 1.</p> <p>This ...

htmlcsscss-selectors

Problem arising from implementing background and relative positioning in html and css

Encountering an issue with html and css. Today, attempted to create a page with a large background image for the first time. Utilizing the foundation framework, but facing a challenge. Foundation is an adaptive framework, and when resizing the browser, a ...

htmlcss

What are the steps for creating a dropdown menu that allows for easy selection of the correct item

I am dealing with a dropdown menu as shown below. <select name="slt"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="3">Three +</option&g ...

javascriptjqueryhtmlasp.net

ISP Blocks Flash Access

My innovative set of flash games has been adopted by numerous schools throughout the UK. However, I recently encountered an issue where one school was unable to load these Flash games... After reaching out to the school's Internet Service Provider (S ...

phpmysqlhtmlflash

Having trouble getting CSS :last-of-type to work properly alongside :not?

I have encountered an issue with selecting the last list item in a specific case. I have a list of items where only one can be selected at a time, and when selected, it should be displayed at the top of the list using flex ordering. However, I am having tr ...

htmlcsscss-selectorsflexbox

Images in Angular Firebase causing scroll problems in Chrome

In regard to Angular 6, a common issue arises with slow image loading specifically in Chrome, not other browsers. The project utilizes Firebase and the snapshotchange method to fetch images for the Angular project. Image URLs used are like this: . The iss ...

htmlangulartypescriptfirebasegoogle-chrome

The iframe does not completely fill the col-sm column

https://i.sstatic.net/VeqFj.jpgHaving an issue styling embedded Grafana panels on my website. How can I adjust the iframes to fit within col-sm without large margins (refer to attached screenshot) This is my html: <p class= ...

htmlbootstrap-5

Applying a margin to a CSS div at the bottom may cause it to not

I'm struggling to achieve the desired outcome with my layout: https://i.stack.imgur.com/CvLFl.png I have successfully replicated the image, but only when my div is not floating on the page (without margin applied and without using position: absolute ...

css

Concealing the toolbars on iOS 7 with the overlay technique

After researching on Stack Overflow and Google, I have been trying to find a reliable method to hide the toolbars on iOS 7 since the old scroll trick is no longer effective. I came across this resource: I attempted the following code: <!doctype html& ...

javascriptjqueryioscss

Show a nested outline when hovering over the main list item

I have a structured menu with nested lists for sub menus <nav> <ul> <li class="itm">A <ul> <li>One</li> <li>Two <ul> <li>Menu Item 1</li> ...

javascriptjqueryhtmlcss

Guide to fetching and displaying dropdown values from a database using PHP

Hello everyone, I need help on retrieving data from a database and displaying it in a drop-down list. I have written the following PHP code: public function System_parameter_dropdown_value() { $sql= " SELECT * FROM SYSTEM_PARAMETERS WHERE PARAMETER_KE ...

phphtmlcss

Height constraint disregarded by anchor

I am facing an issue with a large textual menu where the active link space is overlapping onto the other menu items. This is causing difficulty in accurately clicking on a link. For reference, you can check out this example: http://jsfiddle.net/dhyz48j3/1 ...

htmlcssanchor

The html carousel displays stacked images instead of scrolling

I have been staring at this code for what feels like an eternity, trying to figure out why it's only displaying stacked pictures instead of a functioning carousel. Perhaps I overlooked something crucial. Could someone please lend a hand? My code is pr ...

javascriptjqueryhtmlcarousel

The jQuery equalTo function is throwing an error because it doesn't recognize that the two emails are identical

Why is it that even though both email addresses are exactly the same, I still get an error message saying they don't match? The error seems to be with email2 specifically. * Email: <input type='text' name='email' /> <br/ ...

javascriptjqueryhtmlvalidationjquery-validate

Guide on clicking an element in selenium that has an href attribute of "javascript:void(0)" when the element is not attached to the page document

This is the web page HTML structure that caught my attention. <div class="paging"> <a href="javascript:void(0)" id="pcPaging1" class="active">1</a> <a href="javascript:void(0)" id=" ...

javascriptpythonhtmlseleniumweb-crawler

swapping between two lines within a div

i'm developing a new music app and I am in need of the following chord progression: Am F G Am Ab Gdim A# Hello these are just placeholder lyrics for demonstration purposes, hey hey hello which should look li ...

htmlcss

The reason for variation in the width setting for input elements

I've been scratching my head for a while now trying to figure out why the width of input elements isn't setting correctly. In this example, I set the width to 100px for the submit button But in this one, I also set it to 100px for the text fie ...

htmlcsswidthquirks-mode

Acquire feedback from PHP using SweetAlert notifications

I need to update my HTML form to function like this: <script> function getName() { var name = $('#name').val(); var url_send = 'send.php'; $.ajax({ url: url_send, data: 'name=' + name, ...

javascriptjqueryhtmlajaxsweetalert