In my HTML code; there are 2 images when I hover over a one image I want the other image to start and keep rotating until I stop hovering…how to code my css to make this happen… both my images are png files. first attempt… here the id of the image I hover to make the other image rotate is "image_hov" and the id of the image that is supposed to be rotating is "image_rot" here is the html code related to the first attempt
first attempt
HTML
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image_hov" src="C:UsersUSERDownloadsimgshov.png" alt="image_hover">
<img id="image_rot" src="C:UsersUSERDownloadsimgsrot.png" alt="image_rotate">
</div>
</span>
</body>
</html>`
CSS
`#chat {
width: 150px;
height: 100px;
position: fixed;
top: 280px;
left: 1370px;
}
#image_hov {
width: 50px;
height: 50px;
position: relative;
bottom: 113px;
right: 29.35px;
}
#image_rot {
width: 67px;
height: 67px;
position: relative;
bottom: 104px;
left: 33px;
}
#image_hov:hover , #image_rot {
animation: rotation 2s infinite linear;
}`
second attempt
I contained "image_rot" inside of a div and tried calling the dive and rotating it
hoping that the image would rotate along with it. I gave that div an id called "div_rot"
HTML
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>Document</title>
</head>
<body>
<span id="bot">
<div id="chat">
<img id="image_hov" src="C:UsersUSERDownloadsimgshov.png" alt="image_hover">
<div id="div_rot">
<img id="image_rot" src="C:UsersUSERDownloadsimgsrot.png" alt="image_rotate">
</div>
</div>
</span>
</body>
</html>`
CSS
`#chat {
width: 150px;
height: 100px;
position: fixed;
top: 280px;
left: 1370px;
}
#image_hov {
width: 50px;
height: 50px;
}
#div_rot {
position: relative;
bottom: 113px;
right: 29.35px;
}
#image_rot {
width: 67px;
height: 67px;
position: relative;
bottom: 104px;
left: 33px;
}
#image_hov:hover , #div_rot {
animation: rotation 2s infinite linear;
}`
Non of the above attempts worked is anyone can help me find where I went wrong
or how should I update the code to make this work I will be very thankful
2
Answers
In your code I don’t see the rotation animation, to use CSS animation, you must first specify some keyframes for the animation.
Also you don’t use the right selector, you should use
+
or~
Your HTML code is not valid, div not allowed as child of span. You can check your code validation with a HTML validator, like W3C`s validator
validator
Check the documentation about selectors: documentation
Your HTML structure is not correct. To achieve what you want you need to point a CSS animation to the image hover selector: